Number field

Campo numérico con controles de incremento y decremento.

Navegadores: Chrome 123+Firefox 121+Safari 17.5+
Nivel: 1
Tamaño comprimido: 2.45 kB
Presupuesto de diseño forzado: 0 ms
Presupuesto de axe: 0
Compatible con SSR: Sí
Contrato publicado: Entorno de pruebas

Zona de pruebas

Number Field

Predeterminado

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`

Prop	Tipo	Predeterminado	Descripción
`value`	`number`	—	Número actual; hace que el campo sea controlado.
`defaultValue`	`number`	—	Número inicial del campo no controlado.
`onValueChange`	`(value: number \| undefined) => void`	—	Se llama con el número interpretado, o undefined cuando el input está vacío.
`min`	`number`	—	Valor mínimo aceptado.
`max`	`number`	—	Valor máximo aceptado.
`step`	`number`	`1`	Cantidad que añaden o restan los botones de incremento y decremento.
`formatOptions`	`Intl.NumberFormatOptions`	—	Opciones del Intl.NumberFormat que se usa para mostrar el valor.
`clampValueOnBlur`	`boolean`	`true`	Devuelve un valor fuera de rango al intervalo entre min y max cuando el input pierde el foco.
`disabled`	`boolean`	`false`	Desactiva el input y ambos botones de incremento y decremento.
`readOnly`	`boolean`	`false`	Hace que el valor sea de solo lectura y mantiene el input enfocable.
`required`	`boolean`	`false`	Marca el input como obligatorio para la validación del formulario.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`NumberField.Group`

Prop	Tipo	Predeterminado	Descripción
`children`	`ReactNode`	—	El input y los botones de incremento y decremento envueltos por el grupo.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`NumberField.Input`

Prop	Tipo	Predeterminado	Descripción
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`NumberField.Increment`

Prop	Tipo	Predeterminado	Descripción
`children`	`ReactNode`	—	Contenido del botón de incremento.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`NumberField.Decrement`

Prop	Tipo	Predeterminado	Descripción
`children`	`ReactNode`	—	Contenido del botón de decremento.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Teclado

Tecla	Acción
`Tab`	Llevar el foco al control o sacarlo de él
`Enter` / `Space`	Activar cuando tiene el foco (controles de tipo botón)

Accesibilidad

Usa HTML semántico siempre que es posible. Inspecciona el marcado renderizado en el entorno de pruebas: ARIA se añade solo cuando los elementos nativos no bastan.

Puntos de estilo

data-uiify-number-fielddata-disabled

Framework

Estilo

Tema

Idioma