Inputs

Field

Label, description and validation around any control. Horizontal layout for settings rows; FieldActions puts a form's own controls on one line under its fields.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { Button } from "@nibapp/ui/components/button";import { Checkbox, CheckboxGroup } from "@nibapp/ui/components/checkbox";import { Field, FieldActions, FieldDescription, FieldItem, FieldRoot, Fieldset, FieldsetLegend } from "@nibapp/ui/components/field";import { Input } from "@nibapp/ui/components/input";import { Select } from "@nibapp/ui/components/select";import { Switch } from "@nibapp/ui/components/switch";import { Textarea } from "@nibapp/ui/components/textarea";

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.

Button

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "ghost" \| "quiet" \| "danger" \| "danger-ghost" \| "link"	"secondary"	primary Neutral ink: the main call to action. Actions are ink, never the accent. secondary Quiet surface with a hairline — the default for most actions. ghost No chrome until hovered — toolbars, inline actions. quiet Words that are also an action, in the text's own weight and laid out from the start, so they line up with the text around them: `xs` in a line (a header's crumbs, a title that renames), `sm` a toolbar's picker, `md` a row in a list or a popover ("Open settings", a sidebar's link). danger Destructive confirmation. danger-ghost Destructive but low emphasis. link Inline text action.
size	"xs" \| "sm" \| "md" \| "lg"	"md"
block	boolean	—
truncate	boolean	—	The button may shrink below its label's width; the label then truncates with an ellipsis.
wrap	boolean	—	The label wraps onto more lines and the button grows, its `leading` icon on the first line: for words that are an action and may run long in another language (a tip). One line keeps the size.
loading	boolean	false	Shows a spinner, keeps the button's width, and blocks interaction.
leading	ReactNode	—	Icon rendered before the label.
trailing	ReactNode	—	Icon or hint (e.g. <Kbd>) rendered after the label.
disabledReason	string \| undefined	—	Disables the button and says why: the reason is its tooltip and its accessible description, and the button stays focusable (`aria-disabled`) so a keyboard reaches it.

Also takes .

Checkbox

Ink checkbox with a drawn-on check. Pass `label` for the common box + text composition.

Prop	Type	Default	Description
size	"sm" \| "md"	"md"
label	ReactNode	—	Visible label rendered to the right; clicking it toggles the box.
description	ReactNode	—	Secondary line under the label.

Also takes the props of Base UI's Checkbox.Root, except children.

CheckboxGroup

Shares a `string[]` value across child checkboxes (each needs a `value`).

Prop	Type	Default	Description
orientation	"vertical" \| "horizontal"	"vertical"

Also takes .

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.

FieldActions

Under a form's fields, the controls that complete it (a role, Send): on one line while the width holds them, wrapping onto the next when it doesn't, and lined up on their controls. A field in the row keeps its label and no description, so a hint can't push the others out of line: the hint belongs to the full-width field above.

Also takes the props of a <div> element.

FieldDescription

Also takes the props of Base UI's Field.Description.

FieldItem

One option inside a checkbox or radio group that sits within a Field.

Also takes the props of Base UI's Field.Item.

FieldRoot

Groups a control with its label, description and error. Every input in the kit works inside it.

Also takes the props of Base UI's Field.Root.

Fieldset

A titled group of fields (or of checkboxes/radios via `render={<CheckboxGroup />}`).

Also takes the props of Base UI's Fieldset.Root.

FieldsetLegend

Also takes the props of Base UI's Fieldset.Legend.

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. bare `bare`: text you edit in place, inside a heading or a card (a task's title): no chrome at rest and the surrounding type (size, weight, line height), a wash on hover and focus, and the focus halo. Touch screens still get at least 16 px, so iOS doesn't zoom.
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.

Select

Single-value select from a list of options: `<Select items={models} defaultValue="opus" />`.

Prop	Type	Default	Description
variant	"default" \| "ghost"	"default"	default Framed, matches Input. ghost Chromeless until hovered: toolbars, inline pickers ("Last 7 days ⌄").
size	"sm" \| "md" \| "lg"	"md"
block	boolean	—
items (required)	readonly SelectEntry<Value>[]	—	Flat options, or groups of options (separated automatically).
placeholder	ReactNode	—
leading	ReactNode	—	Icon before the value in the trigger.
aria-label	string	—	Required when there's no visible <Field> label.
className	string \| undefined	—	Classes for the trigger.
contentClassName	string \| undefined	—
side	SelectContentProps["side"]	—
align	SelectContentProps["align"]	—
alignItemWithTrigger	boolean	—

Also takes BaseSelect.Root.Props<Value>, except items, children and multiple.

Switch

Ink toggle with a springy thumb that stretches while pressed.

Prop	Type	Default	Description
size	"sm" \| "md"	"md"	sm 16 × 28 — dense rows, menus. md 20 × 36 — settings rows.
label	ReactNode	—	Visible label to the right of the switch. For settings rows prefer <Field orientation="horizontal">.
description	ReactNode	—

Also takes the props of Base UI's Switch.Root, except children.

Textarea

Multi-line text field. Auto-grows with CSS `field-sizing: content` and falls back to measuring `scrollHeight` where unsupported. Works inside <Field> for labels and validation. What a person writes takes its direction from its first letter (`dir="auto"`), so an English note reads left to right in a right-to-left interface; pass `dir` to fix it.

Prop	Type	Default	Description
variant	"default" \| "bare"	"default"	default Framed field, same chrome as Input. bare No chrome: embed inside a custom container, such as a message field with its own toolbar.
size	"sm" \| "md" \| "lg"	"md"
ref	Ref<HTMLTextAreaElement> \| undefined	—
value	string	—
defaultValue	string	—
onValueChange	(value: string) => void	—	Fires with the new text on every edit.
autoGrow	boolean	true	Grow with content between `minRows` and `maxRows`. Default `true`.
minRows	number	—	Minimum visible lines. Default 3 (1 for `bare`).
maxRows	number	12	Maximum visible lines before scrolling. Default 12.
invalid	boolean	—	Marks the field invalid outside of a <Field>.

Also takes the props of a <textarea> element, except ref, rows, value and defaultValue.