Inputs
Code input & display
One-time codes, typed or shown: monospace figures with one letter-spacing, left to right in every language. CodeInput takes `length` digits, or with `letters` a device code; CodeDisplay renders as a button when a click copies.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { CodeDisplay, CodeInput } from "@nibapp/ui/components/code-input";import { Field } from "@nibapp/ui/components/field";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
CodeDisplay
A code a person compares or types somewhere else (a device code, a check code), in spaced monospace figures. A `<code>` by default; `render={<button type="button" />}` when a click copies it. As a button its name is the code it shows; `title` says what the click does.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "md" | "lg" | "md" |
|
Also takes .
CodeInput
The field for a code: a one-time code from an email (digits, `length` of them, offered by the platform's one-time-code autofill), or with `letters` a device code to type in, in large spaced figures. Put it in a `<Field>` for its label and error.
| Prop | Type | Default | Description |
|---|---|---|---|
| length (required) | number | — | How many characters the code has. |
| letters | boolean | false | Letters too, typed in capitals: a device code such as `ABCD-EFGH`, which the field doesn't check (the page reads it as it likes). Otherwise digits only, offered by one-time-code autofill. |
Also takes InputProps, except inputMode, autoComplete, autoCapitalize, spellCheck, pattern, maxLength, type, size, inputClassName and dir.
Field
Label + control + description + error in one.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | — | |
| hint | ReactNode | — | Muted trailing text in the label row — "Optional", a character count… |
| description | ReactNode | — | |
| error | ReactNode | — | Forces the field invalid and shows this message. Omit to show the browser's validation message after Base UI validates the control. |
| orientation | "vertical" | "horizontal" | "vertical" | `vertical` stacks label → control → description. `horizontal` puts the copy on the left and the control on the right — the settings-row layout for switches and compact selects. |
| nativeLabel | boolean | true | Set to `false` for button controls (Select, Combobox trigger) so clicking the label focuses rather than presses the trigger. |
| children (required) | ReactNode | — |
Also takes the props of Base UI's Field.Root, except children.