Number field

import { NumberField } from 'topclassui/number-field'

/** Outside a Field: a native label points at the id, which Base UI gives to the visible input. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-2">
      <label htmlFor="number-field-basic-guests" className="text-sm text-body">Guests</label>
      <NumberField id="number-field-basic-guests" defaultValue={2} min={1} max={8} />
    </div>
  )
}

import { NumberField } from 'topclassui/number-field'

/** A value at its max, so the increase stepper is disabled and dimmed; and a step of 0.5, which a decimal needs. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-3">
      <NumberField name="seats" defaultValue={8} min={1} max={8} aria-label="Seats" />
      <NumberField name="hours" defaultValue={1.5} min={0} max={12} step={0.5} aria-label="Hours" />
    </div>
  )
}

import { Button } from 'topclassui/button'
import { NumberField } from 'topclassui/number-field'

/** One field in a plain form: it sends guests=2, before any script runs and after. */
export default function Demo() {
  return (
    <form className="grid justify-items-start gap-2">
      <label htmlFor="number-field-form-guests" className="text-sm text-body">Guests</label>
      <NumberField id="number-field-form-guests" name="guests" defaultValue={2} min={1} max={8} />
      <Button type="submit">Book</Button>
    </form>
  )
}

import { NumberField } from 'topclassui/number-field'

/** The five sizes. Each is as wide as an Input of its size, and every stepper stays 24 px, 44 under a finger. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-3">
      <NumberField size="xs" defaultValue={12} aria-label="Extra small" />
      <NumberField size="sm" defaultValue={12} aria-label="Small" />
      <NumberField size="md" defaultValue={12} aria-label="Medium" />
      <NumberField size="lg" defaultValue={12} aria-label="Large" />
      <NumberField size="xl" defaultValue={12} aria-label="Extra large" />
    </div>
  )
}

import { NumberField } from 'topclassui/number-field'

/** Two side by side: each shrinks to its share, as two Inputs would, and the page never scrolls. Under 6.5rem each, as at
 * 200% text on a phone, the second goes under the first, so neither has a stepper cut. */
export default function Demo() {
  return (
    <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,6.5rem),max-content))] gap-2">
      <NumberField defaultValue={2} min={0} aria-label="Adults" />
      <NumberField defaultValue={0} min={0} aria-label="Children" />
    </div>
  )
}

import { TopClassProvider } from 'topclassui/provider'
import { NumberField } from 'topclassui/number-field'

/** Arabic, inside TopClassProvider as the root layout would mount it. Increase is at the left, the number stays
 * left-to-right; the first writes Latin digits, as the provider does, the second Arabic-Indic ones from its locale. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar" className="grid justify-items-start gap-2">
        <label htmlFor="number-field-rtl-change" className="text-sm text-body">الفرق</label>
        <NumberField id="number-field-rtl-change" name="change" defaultValue={-5} min={-10} max={10} />
        <label htmlFor="number-field-rtl-guests" className="text-sm text-body">عدد الضيوف</label>
        <NumberField id="number-field-rtl-guests" name="guests" locale="ar-u-nu-arab" defaultValue={1234.5} step="any" />
      </div>
    </TopClassProvider>
  )
}