Number field

带步进按钮的数字输入框。

浏览器: Chrome 123+Firefox 121+Safari 17.5+
层级: 1
压缩后大小: 2.45 kB
强制布局预算: 0 ms
axe 预算: 0
支持 SSR: 是
公开契约: 测试环境

交互示例

Number Field

默认

React

CSS

Tailwind

import { NumberField } from "@gunkin/uiify";

export default function Example() {
  return (
    <NumberField.Root className="" defaultValue={1} min={0} max={10}>
      <NumberField.Decrement aria-label="Decrease" />
      <NumberField.Input aria-label="Quantity" />
      <NumberField.Increment aria-label="Increase" />
    </NumberField.Root>
  );
}

/* Number field — spinbutton with increment/decrement controls. */

@layer components {
  [data-uiify-number-field] {
    display: inline-flex;
    align-items: stretch;
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-md);
    corner-shape: squircle;
    background-color: var(--card);
    overflow: hidden;
  }

  [data-uiify-number-field] > [role="spinbutton"],
  [data-uiify-number-field] > [data-part="group"] > [role="spinbutton"] {
    inline-size: 4rem;
    min-block-size: 36px;
    line-height: 1.25rem;
    padding-block: 0;
    padding-inline: var(--space-md);
    border: none;
    background: none;
    color: var(--foreground);
    font-size: var(--uiify-control-text);
    text-align: center;
    outline: none;
  }

  [data-uiify-number-field]:focus-within {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  [data-uiify-number-field] :focus-visible {
    outline: none;
  }

  [data-uiify-number-field] > button,
  [data-uiify-number-field] > [data-part="group"] > button,
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"],
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: none;
    border-inline-start: var(--border-width) solid var(--border);
    background-color: transparent;
    color: var(--foreground);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-colors);
  }

  [data-uiify-number-field] > button:empty::before,
  [data-uiify-number-field] > [data-part="group"] > button:empty::before,
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"]:empty::before,
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"]:empty::before {
    display: block;
  }

  [data-uiify-number-field] > button:first-child:empty::before,
  [data-uiify-number-field] > [data-part="group"] > button:first-child:empty::before,
  [data-uiify-number-field]
    > [data-part="group"]
    > [data-part="decrement"]:first-child:empty::before {
    content: "←" / "";
  }

  [data-uiify-number-field] > button:last-child:empty::before,
  [data-uiify-number-field] > [data-part="group"] > button:last-child:empty::before,
  [data-uiify-number-field]
    > [data-part="group"]
    > [data-part="increment"]:last-child:empty::before {
    content: "→" / "";
  }

  [data-uiify-number-field]:dir(rtl) > button:empty::before,
  [data-uiify-number-field]:dir(rtl) > [data-part="group"] > button:empty::before,
  [data-uiify-number-field]:dir(rtl) > [data-part="group"] > [data-part="increment"]:empty::before,
  [data-uiify-number-field]:dir(rtl) > [data-part="group"] > [data-part="decrement"]:empty::before {
    scale: -1 1;
  }

  [data-uiify-number-field] > button:first-child,
  [data-uiify-number-field] > [data-part="group"] > button:first-child,
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"]:first-child {
    border-inline-start: none;
    border-inline-end: var(--border-width) solid var(--border);
  }

  [data-uiify-number-field] > button:hover,
  [data-uiify-number-field] > [data-part="group"] > button:hover,
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"]:hover,
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"]:hover {
    background-color: color-mix(in oklch, var(--foreground) 8%, transparent);
  }

  [data-uiify-number-field] > button[data-disabled],
  [data-uiify-number-field] > [data-part="group"] > button[data-disabled],
  [data-uiify-number-field] > [data-part="group"] > [data-part="increment"][data-disabled],
  [data-uiify-number-field] > [data-part="group"] > [data-part="decrement"][data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [data-uiify-number-field] > [data-part="group"] {
    display: inline-flex;
    align-items: stretch;
  }
}

import { NumberField } from "@gunkin/uiify";

export default function Example() {
  return (
    <NumberField.Root
      className={
        "inline-flex items-stretch border-[length:var(--border-width)] border-solid border-input rounded-md [corner-" +
        "shape:squircle] bg-card overflow-hidden [&>[role=spinbutton]]:[inline-size:4rem] [&>[role=spinbutton]]:[min" +
        "-block-size:36px] [&>[role=spinbutton]]:leading-5 [&>[role=spinbutton]]:py-0 [&>[role=spinbutton]]:px-md [&" +
        ">[role=spinbutton]]:border-0 [&>[role=spinbutton]]:border-current [&>[role=spinbutton]]:border-none [&>[rol" +
        "e=spinbutton]]:bg-none [&>[role=spinbutton]]:bg-transparent [&>[role=spinbutton]]:text-foreground [&>[role=" +
        "spinbutton]]:[font-size:var(--uiify-control-text)] [&>[role=spinbutton]]:text-center [&>[role=spinbutton]]:" +
        "[outline:none] [&>[data-part=group]>[role=spinbutton]]:[inline-size:4rem] [&>[data-part=group]>[role=spinbu" +
        "tton]]:[min-block-size:36px] [&>[data-part=group]>[role=spinbutton]]:leading-5 [&>[data-part=group]>[role=s" +
        "pinbutton]]:py-0 [&>[data-part=group]>[role=spinbutton]]:px-md [&>[data-part=group]>[role=spinbutton]]:bord" +
        "er-0 [&>[data-part=group]>[role=spinbutton]]:border-current [&>[data-part=group]>[role=spinbutton]]:border-" +
        "none [&>[data-part=group]>[role=spinbutton]]:bg-none [&>[data-part=group]>[role=spinbutton]]:bg-transparent" +
        " [&>[data-part=group]>[role=spinbutton]]:text-foreground [&>[data-part=group]>[role=spinbutton]]:[font-size" +
        ":var(--uiify-control-text)] [&>[data-part=group]>[role=spinbutton]]:text-center [&>[data-part=group]>[role=" +
        "spinbutton]]:[outline:none] focus-within:[outline:2px_solid_var(--ring)] focus-within:[outline-offset:2px] " +
        "[&_:focus-visible]:[outline:none] [&>button]:inline-flex [&>button]:items-center [&>button]:justify-center " +
        "[&>button]:flex-none [&>button]:[inline-size:36px] [&>button]:[block-size:36px] [&>button]:p-0 [&>button]:b" +
        "order-0 [&>button]:border-current [&>button]:border-none [&>button]:[border-inline-start-width:var(--border" +
        "-width)] [&>button]:[border-inline-start-style:solid] [&>button]:[border-inline-start-color:var(--border)] " +
        "[&>button]:bg-transparent [&>button]:text-foreground [&>button]:text-lg [&>button]:leading-none [&>button]:" +
        "cursor-pointer [&>button]:[transition:var(--transition-colors)] [&>[data-part=group]>button]:inline-flex [&" +
        ">[data-part=group]>button]:items-center [&>[data-part=group]>button]:justify-center [&>[data-part=group]>bu" +
        "tton]:flex-none [&>[data-part=group]>button]:[inline-size:36px] [&>[data-part=group]>button]:[block-size:36" +
        "px] [&>[data-part=group]>button]:p-0 [&>[data-part=group]>button]:border-0 [&>[data-part=group]>button]:bor" +
        "der-current [&>[data-part=group]>button]:border-none [&>[data-part=group]>button]:[border-inline-start-widt" +
        "h:var(--border-width)] [&>[data-part=group]>button]:[border-inline-start-style:solid] [&>[data-part=group]>" +
        "button]:[border-inline-start-color:var(--border)] [&>[data-part=group]>button]:bg-transparent [&>[data-part" +
        "=group]>button]:text-foreground [&>[data-part=group]>button]:text-lg [&>[data-part=group]>button]:leading-n" +
        "one [&>[data-part=group]>button]:cursor-pointer [&>[data-part=group]>button]:[transition:var(--transition-c" +
        "olors)] [&>[data-part=group]>[data-part=increment]]:inline-flex [&>[data-part=group]>[data-part=increment]]" +
        ":items-center [&>[data-part=group]>[data-part=increment]]:justify-center [&>[data-part=group]>[data-part=in" +
        "crement]]:flex-none [&>[data-part=group]>[data-part=increment]]:[inline-size:36px] [&>[data-part=group]>[da" +
        "ta-part=increment]]:[block-size:36px] [&>[data-part=group]>[data-part=increment]]:p-0 [&>[data-part=group]>" +
        "[data-part=increment]]:border-0 [&>[data-part=group]>[data-part=increment]]:border-current [&>[data-part=gr" +
        "oup]>[data-part=increment]]:border-none [&>[data-part=group]>[data-part=increment]]:[border-inline-start-wi" +
        "dth:var(--border-width)] [&>[data-part=group]>[data-part=increment]]:[border-inline-start-style:solid] [&>[" +
        "data-part=group]>[data-part=increment]]:[border-inline-start-color:var(--border)] [&>[data-part=group]>[dat" +
        "a-part=increment]]:bg-transparent [&>[data-part=group]>[data-part=increment]]:text-foreground [&>[data-part" +
        "=group]>[data-part=increment]]:text-lg [&>[data-part=group]>[data-part=increment]]:leading-none [&>[data-pa" +
        "rt=group]>[data-part=increment]]:cursor-pointer [&>[data-part=group]>[data-part=increment]]:[transition:var" +
        "(--transition-colors)] [&>[data-part=group]>[data-part=decrement]]:inline-flex [&>[data-part=group]>[data-p" +
        "art=decrement]]:items-center [&>[data-part=group]>[data-part=decrement]]:justify-center [&>[data-part=group" +
        "]>[data-part=decrement]]:flex-none [&>[data-part=group]>[data-part=decrement]]:[inline-size:36px] [&>[data-" +
        "part=group]>[data-part=decrement]]:[block-size:36px] [&>[data-part=group]>[data-part=decrement]]:p-0 [&>[da" +
        "ta-part=group]>[data-part=decrement]]:border-0 [&>[data-part=group]>[data-part=decrement]]:border-current [" +
        "&>[data-part=group]>[data-part=decrement]]:border-none [&>[data-part=group]>[data-part=decrement]]:[border-" +
        "inline-start-width:var(--border-width)] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-st" +
        "yle:solid] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-color:var(--border)] [&>[data-p" +
        "art=group]>[data-part=decrement]]:bg-transparent [&>[data-part=group]>[data-part=decrement]]:text-foregroun" +
        "d [&>[data-part=group]>[data-part=decrement]]:text-lg [&>[data-part=group]>[data-part=decrement]]:leading-n" +
        "one [&>[data-part=group]>[data-part=decrement]]:cursor-pointer [&>[data-part=group]>[data-part=decrement]]:" +
        "[transition:var(--transition-colors)] [&>button:empty::before]:block [&>[data-part=group]>button:empty::bef" +
        "ore]:block [&>[data-part=group]>[data-part=increment]:empty::before]:block [&>[data-part=group]>[data-part=" +
        "decrement]:empty::before]:block [&>button:first-child:empty::before]:content-[\"←\"_/_\"\"] [&>[data-part=group" +
        "]>button:first-child:empty::before]:content-[\"←\"_/_\"\"] [&>[data-part=group]>[data-part=decrement]:first-chi" +
        "ld:empty::before]:content-[\"←\"_/_\"\"] [&>button:last-child:empty::before]:content-[\"→\"_/_\"\"] [&>[data-part=g" +
        "roup]>button:last-child:empty::before]:content-[\"→\"_/_\"\"] [&>[data-part=group]>[data-part=increment]:last-c" +
        "hild:empty::before]:content-[\"→\"_/_\"\"] [&:dir(rtl)>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-par" +
        "t=group]>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=increment]:empty::befo" +
        "re]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=decrement]:empty::before]:[scale:-1_1] [&>button:" +
        "first-child]:[border-inline-start:none] [&>button:first-child]:[border-inline-end-width:var(--border-width)" +
        "] [&>button:first-child]:[border-inline-end-style:solid] [&>button:first-child]:[border-inline-end-color:va" +
        "r(--border)] [&>[data-part=group]>button:first-child]:[border-inline-start:none] [&>[data-part=group]>butto" +
        "n:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>button:first-child]:[bord" +
        "er-inline-end-style:solid] [&>[data-part=group]>button:first-child]:[border-inline-end-color:var(--border)]" +
        " [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-start:none] [&>[data-part=group]>[d" +
        "ata-part=decrement]:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>[data-p" +
        "art=decrement]:first-child]:[border-inline-end-style:solid] [&>[data-part=group]>[data-part=decrement]:firs" +
        "t-child]:[border-inline-end-color:var(--border)] [&>button:hover]:[background-color:color-mix(in_oklch,_var" +
        "(--foreground)_8%,_transparent)] [&>[data-part=group]>button:hover]:[background-color:color-mix(in_oklch,_v" +
        "ar(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=increment]:hover]:[background-color:colo" +
        "r-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=decrement]:hover]:[back" +
        "ground-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>button[data-disabled]]:opacity-50 [" +
        "&>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>button[data-disabled]]:opacity-50 [&>[data" +
        "-part=group]>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>[data-part=increment][data-disa" +
        "bled]]:opacity-50 [&>[data-part=group]>[data-part=increment][data-disabled]]:cursor-not-allowed [&>[data-pa" +
        "rt=group]>[data-part=decrement][data-disabled]]:opacity-50 [&>[data-part=group]>[data-part=decrement][data-" +
        "disabled]]:cursor-not-allowed [&>[data-part=group]]:inline-flex [&>[data-part=group]]:items-stretch"
      }
      defaultValue={1}
      min={0}
      max={10}
    >
      <NumberField.Decrement aria-label="Decrease" />
      <NumberField.Input aria-label="Quantity" />
      <NumberField.Increment aria-label="Increase" />
    </NumberField.Root>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('inline-flex items-stretch border-[length:var(--border-width)] border-solid border-input rounded-md [corner-shape:squircle] bg-card overflow-hidden [&>[role=spinbutton]]:[inline-size:4rem] [&>[role=spinbutton]]:[min-block-size:36px] [&>[role=spinbutton]]:leading-5 [&>[role=spinbutton]]:py-0 [&>[role=spinbutton]]:px-md [&>[role=spinbutton]]:border-0 [&>[role=spinbutton]]:border-current [&>[role=spinbutton]]:border-none [&>[role=spinbutton]]:bg-none [&>[role=spinbutton]]:bg-transparent [&>[role=spinbutton]]:text-foreground [&>[role=spinbutton]]:[font-size:var(--uiify-control-text)] [&>[role=spinbutton]]:text-center [&>[role=spinbutton]]:[outline:none] [&>[data-part=group]>[role=spinbutton]]:[inline-size:4rem] [&>[data-part=group]>[role=spinbutton]]:[min-block-size:36px] [&>[data-part=group]>[role=spinbutton]]:leading-5 [&>[data-part=group]>[role=spinbutton]]:py-0 [&>[data-part=group]>[role=spinbutton]]:px-md [&>[data-part=group]>[role=spinbutton]]:border-0 [&>[data-part=group]>[role=spinbutton]]:border-current [&>[data-part=group]>[role=spinbutton]]:border-none [&>[data-part=group]>[role=spinbutton]]:bg-none [&>[data-part=group]>[role=spinbutton]]:bg-transparent [&>[data-part=group]>[role=spinbutton]]:text-foreground [&>[data-part=group]>[role=spinbutton]]:[font-size:var(--uiify-control-text)] [&>[data-part=group]>[role=spinbutton]]:text-center [&>[data-part=group]>[role=spinbutton]]:[outline:none] focus-within:[outline:2px_solid_var(--ring)] focus-within:[outline-offset:2px] [&_:focus-visible]:[outline:none] [&>button]:inline-flex [&>button]:items-center [&>button]:justify-center [&>button]:flex-none [&>button]:[inline-size:36px] [&>button]:[block-size:36px] [&>button]:p-0 [&>button]:border-0 [&>button]:border-current [&>button]:border-none [&>button]:[border-inline-start-width:var(--border-width)] [&>button]:[border-inline-start-style:solid] [&>button]:[border-inline-start-color:var(--border)] [&>button]:bg-transparent [&>button]:text-foreground [&>button]:text-lg [&>button]:leading-none [&>button]:cursor-pointer [&>button]:[transition:var(--transition-colors)] [&>[data-part=group]>button]:inline-flex [&>[data-part=group]>button]:items-center [&>[data-part=group]>button]:justify-center [&>[data-part=group]>button]:flex-none [&>[data-part=group]>button]:[inline-size:36px] [&>[data-part=group]>button]:[block-size:36px] [&>[data-part=group]>button]:p-0 [&>[data-part=group]>button]:border-0 [&>[data-part=group]>button]:border-current [&>[data-part=group]>button]:border-none [&>[data-part=group]>button]:[border-inline-start-width:var(--border-width)] [&>[data-part=group]>button]:[border-inline-start-style:solid] [&>[data-part=group]>button]:[border-inline-start-color:var(--border)] [&>[data-part=group]>button]:bg-transparent [&>[data-part=group]>button]:text-foreground [&>[data-part=group]>button]:text-lg [&>[data-part=group]>button]:leading-none [&>[data-part=group]>button]:cursor-pointer [&>[data-part=group]>button]:[transition:var(--transition-colors)] [&>[data-part=group]>[data-part=increment]]:inline-flex [&>[data-part=group]>[data-part=increment]]:items-center [&>[data-part=group]>[data-part=increment]]:justify-center [&>[data-part=group]>[data-part=increment]]:flex-none [&>[data-part=group]>[data-part=increment]]:[inline-size:36px] [&>[data-part=group]>[data-part=increment]]:[block-size:36px] [&>[data-part=group]>[data-part=increment]]:p-0 [&>[data-part=group]>[data-part=increment]]:border-0 [&>[data-part=group]>[data-part=increment]]:border-current [&>[data-part=group]>[data-part=increment]]:border-none [&>[data-part=group]>[data-part=increment]]:[border-inline-start-width:var(--border-width)] [&>[data-part=group]>[data-part=increment]]:[border-inline-start-style:solid] [&>[data-part=group]>[data-part=increment]]:[border-inline-start-color:var(--border)] [&>[data-part=group]>[data-part=increment]]:bg-transparent [&>[data-part=group]>[data-part=increment]]:text-foreground [&>[data-part=group]>[data-part=increment]]:text-lg [&>[data-part=group]>[data-part=increment]]:leading-none [&>[data-part=group]>[data-part=increment]]:cursor-pointer [&>[data-part=group]>[data-part=increment]]:[transition:var(--transition-colors)] [&>[data-part=group]>[data-part=decrement]]:inline-flex [&>[data-part=group]>[data-part=decrement]]:items-center [&>[data-part=group]>[data-part=decrement]]:justify-center [&>[data-part=group]>[data-part=decrement]]:flex-none [&>[data-part=group]>[data-part=decrement]]:[inline-size:36px] [&>[data-part=group]>[data-part=decrement]]:[block-size:36px] [&>[data-part=group]>[data-part=decrement]]:p-0 [&>[data-part=group]>[data-part=decrement]]:border-0 [&>[data-part=group]>[data-part=decrement]]:border-current [&>[data-part=group]>[data-part=decrement]]:border-none [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-width:var(--border-width)] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-style:solid] [&>[data-part=group]>[data-part=decrement]]:[border-inline-start-color:var(--border)] [&>[data-part=group]>[data-part=decrement]]:bg-transparent [&>[data-part=group]>[data-part=decrement]]:text-foreground [&>[data-part=group]>[data-part=decrement]]:text-lg [&>[data-part=group]>[data-part=decrement]]:leading-none [&>[data-part=group]>[data-part=decrement]]:cursor-pointer [&>[data-part=group]>[data-part=decrement]]:[transition:var(--transition-colors)] [&>button:empty::before]:block [&>[data-part=group]>button:empty::before]:block [&>[data-part=group]>[data-part=increment]:empty::before]:block [&>[data-part=group]>[data-part=decrement]:empty::before]:block [&>button:first-child:empty::before]:content-["←"_/_""] [&>[data-part=group]>button:first-child:empty::before]:content-["←"_/_""] [&>[data-part=group]>[data-part=decrement]:first-child:empty::before]:content-["←"_/_""] [&>button:last-child:empty::before]:content-["→"_/_""] [&>[data-part=group]>button:last-child:empty::before]:content-["→"_/_""] [&>[data-part=group]>[data-part=increment]:last-child:empty::before]:content-["→"_/_""] [&:dir(rtl)>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>button:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=increment]:empty::before]:[scale:-1_1] [&:dir(rtl)>[data-part=group]>[data-part=decrement]:empty::before]:[scale:-1_1] [&>button:first-child]:[border-inline-start:none] [&>button:first-child]:[border-inline-end-width:var(--border-width)] [&>button:first-child]:[border-inline-end-style:solid] [&>button:first-child]:[border-inline-end-color:var(--border)] [&>[data-part=group]>button:first-child]:[border-inline-start:none] [&>[data-part=group]>button:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>button:first-child]:[border-inline-end-style:solid] [&>[data-part=group]>button:first-child]:[border-inline-end-color:var(--border)] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-start:none] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-end-width:var(--border-width)] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-end-style:solid] [&>[data-part=group]>[data-part=decrement]:first-child]:[border-inline-end-color:var(--border)] [&>button:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>button:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=increment]:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>[data-part=group]>[data-part=decrement]:hover]:[background-color:color-mix(in_oklch,_var(--foreground)_8%,_transparent)] [&>button[data-disabled]]:opacity-50 [&>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>button[data-disabled]]:opacity-50 [&>[data-part=group]>button[data-disabled]]:cursor-not-allowed [&>[data-part=group]>[data-part=increment][data-disabled]]:opacity-50 [&>[data-part=group]>[data-part=increment][data-disabled]]:cursor-not-allowed [&>[data-part=group]>[data-part=decrement][data-disabled]]:opacity-50 [&>[data-part=group]>[data-part=decrement][data-disabled]]:cursor-not-allowed [&>[data-part=group]]:inline-flex [&>[data-part=group]]:items-stretch');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`NumberField.Root`

属性	类型	默认值	说明
`value`	`number`	—	当前数字，使字段受控。
`defaultValue`	`number`	—	非受控字段的初始数字。
`onValueChange`	`(value: number \| undefined) => void`	—	使用解析后的数字调用；输入为空时为undefined。
`min`	`number`	—	接受的最小值。
`max`	`number`	—	接受的最大值。
`step`	`number`	`1`	递增和递减按钮每次增加或减少的量。
`formatOptions`	`Intl.NumberFormatOptions`	—	用于显示值的Intl.NumberFormat选项。
`clampValueOnBlur`	`boolean`	`true`	输入框失去焦点时，将越界值拉回min和max范围内。
`disabled`	`boolean`	`false`	禁用输入框及两个步进按钮。
`readOnly`	`boolean`	`false`	使值只读，同时保留输入框的可聚焦性。
`required`	`boolean`	`false`	将输入框标为必填，用于表单校验。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	替换渲染元素，同时保留行为和无障碍连接关系。

`NumberField.Group`

属性	类型	默认值	说明
`children`	`ReactNode`	—	由组包裹的输入框和步进按钮。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	替换渲染元素，同时保留行为和无障碍连接关系。

`NumberField.Input`

属性	类型	默认值	说明
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	替换渲染元素，同时保留行为和无障碍连接关系。

`NumberField.Increment`

属性	类型	默认值	说明
`children`	`ReactNode`	—	递增按钮的内容。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	替换渲染元素，同时保留行为和无障碍连接关系。

`NumberField.Decrement`

属性	类型	默认值	说明
`children`	`ReactNode`	—	递减按钮的内容。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	替换渲染元素，同时保留行为和无障碍连接关系。

键盘

按键	操作
`Tab`	将焦点移入或移出控件
`Enter` / `Space`	获得焦点时激活（按钮类控件）

无障碍

尽可能使用语义化HTML。可在交互示例中检查渲染的标记；仅在原生元素无法满足需求时添加ARIA。

样式钩子

data-uiify-number-fielddata-disabled

框架

样式

主题

语言

Number field

交互示例

Number Field

默认

API

`NumberField.Root`

`NumberField.Group`

`NumberField.Input`

`NumberField.Increment`

`NumberField.Decrement`

键盘

无障碍

样式钩子