Inputs
Input
Quiet surface, hairline border and a soft focus halo. Adornment slots for icons, keys and buttons. Bare edits text in place inside a heading or a card.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { IconButton } from "@nibapp/ui/components/button";import { Input } from "@nibapp/ui/components/input";import { Shortcut } from "@nibapp/ui/components/kbd";import { MoneyInput } from "@nibapp/ui/components/money-input";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.
IconButton
Square, icon-only button. Pair with <Tooltip> to surface the label visually (a `disabledReason` brings its own).
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | |
| aria-label (required) | string | — | Required: icon-only controls must be named for assistive tech. |
| children (required) | ReactNode | — | |
| loading | boolean | false | |
| disabledReason | string | undefined | — | Disables the button and says why, as Button's `disabledReason`. |
Also takes the props of Base UI's Button, except aria-label and children.
Input
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | |
| appearance | "field" | "wash" | "bare" | "field" | `wash`: a resting field on chrome (a sidebar's search): ink over whatever is beneath and no border until it has focus, when it takes the field's surface. Paper's own surface reads yellow over light vibrancy.
|
| leading | ReactNode | — | Icon, Kbd or IconButton rendered before the text. |
| trailing | ReactNode | — | Icon, Kbd, unit or IconButton rendered after the text. |
| invalid | boolean | — | Marks the input invalid outside of a <Field> (inside one, Field drives it). |
| className | string | undefined | — | Classes for the outer frame (width, margins…). |
| inputClassName | ComponentProps<typeof BaseInput>["className"] | — | Classes for the inner `<input>` element. |
Also takes the props of Base UI's Input, except size and className.
Shortcut
A key combination rendered as keycaps with platform-aware glyphs. The keycaps are always `aria-hidden`; at most one spoken form exists (the `spoken` words), never glyphs plus words.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | |
| bare | boolean | — | `bare` drops the keycap chrome — for hints inside menus and buttons. |
| keys (required) | readonly string[] | — | Logical keys, e.g. `["mod", "k"]` → ⌘K on macOS, Ctrl K elsewhere. |
| spoken | boolean | false | Announce the chord in words ("Command K"). Off by default: a shortcut inside a button, menu item or tooltip is announced through the control's `aria-keyshortcuts` (see `ariaKeyShortcuts`), so its name doesn't double up as "New document⌘N⌘N". Turn on for standalone hints and shortcut lists, where the keys are the content. |
Also takes the props of a <span> element, except children.
MoneyInput
An amount field: its currency's symbol (`currency`, else the provider's) on the side the person's locale writes it ("$ 12.50", "12,50 €"), and the amount read in that locale (`parseAmount`: its digits, group and decimal marks) within `min`, `max`, `step` (1 for whole units) and `nonZero`, reported by `onAmountChange`. Text that isn't such an amount marks the field invalid unless `invalid` says otherwise. Whole non-negative steps get the numeric keyboard, everything else the decimal one.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | undefined | — | The text, when the caller keeps it (a slider writes into the field); otherwise the field keeps its own. |
| defaultAmount | number | null | undefined | — | The amount the field starts with, written in the person's locale ("12.5", "12,5"); empty for `null`. |
| onAmountChange | ((amount: number | null | undefined) => void) | undefined | — | On every edit, the amount typed in the person's locale within the bounds: the number, `null` for an empty field that `allowEmpty`, `undefined` for anything else. |
| currency | string | undefined | — | The ISO 4217 currency the amount is in ("EUR"); the provider's when left out. |
Also takes InputProps, except leading, trailing, type, min, max, step, value and defaultValue, and .