Input
A text input wrapping the Base UI Input, with optional icons and a hint line. Drop it inside a Field for labels, descriptions, and validation wired automatically.
Playground
Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.
Variants
Bordered is the default; borderless trades the border for a muted fill, the same surface as a secondary button.
States
Focus rings on every focus, not just keyboard. Invalid turns the border, ring, and hint to the danger color.
Styling states
Inside a Field, state comes through data attributes (data-focused, data-filled, data-invalid); a standalone input styles focus with :focus. Custom styling never needs JavaScript:
.ub-input[data-invalid] {
border-color: var(--ub-danger);
}Props
Everything a native input accepts, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "borderless" | "default" | Bordered, or a muted fill with no border. |
size | "default" | "compact" | "default" | Default is 36px tall with 16px text; compact is 28px with 14px text. Replaces the native size attribute; control width with CSS. |
invalid | boolean | false | Danger border, ring, and hint, plus aria-invalid; a surrounding Field sets it automatically. |
leadingIcon | ReactNode | – | Icon inside the input, before the text. Decorative. |
trailingIcon | ReactNode | – | Icon inside the input, after the text. Decorative. |
hint | ReactNode | – | Helper text below the input, linked via aria-describedby. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Input, from @usebones/react.
- variant: "default" | "borderless". size: "default" | "compact". invalid for standalone error state.
- leadingIcon/trailingIcon take a ReactNode (use <Icon /> from @usebones/icons); they are decorative. hint renders below, linked via aria-describedby.
- The Bones size prop replaces the native size attribute; control width with CSS. All other native input props pass through.
- Inside FieldRoot, drop invalid and hint and use FieldLabel, FieldDescription, and FieldError instead.
- Restyle in CSS via .ub-input, [data-invalid], [data-disabled], and inside a Field also [data-focused] and [data-filled]; standalone focus is :focus. Tokens only.