Primitives

Input

A single-line text field on the field tokens, with invalid and disabled states

Import

import { Input } from "@nyte-ai/ui";

Implemented in packages/ui/src/components/ui/input.tsx, wrapping @base-ui/react/input.

Usage

Every input must have an accessible name: a <label for>, aria-label, or aria-labelledby. Placeholder is not a name.
Set aria-invalid when validation fails; the border switches to --nyte-color-destructive.
Width is 100%; constrain it with the parent, not with style.
For multi-line text use Textarea.

Anatomy

A single <input> with data-slot="input".

Examples

<Input placeholder="Workspace name" aria-label="Workspace name" />
<Input aria-label="Invalid" aria-invalid defaultValue="not-a-url" />
<Input aria-label="Disabled" disabled />

Props

Prop	Type	Default	Description
`unstyled`	`boolean`	`false`	Render with no StyleX class.
`className`, `style`, `xstyle`	see Theming

A native input element that automatically works with Field. Renders an <input> element.

Input Props:

Prop	Type	Default	Description
defaultValue	`string \| number \| string[]`	-	The default value of the input. Use when uncontrolled.
value	`string \| string[] \| number`	-	The value of the input. Use when controlled.
onValueChange	`((value: string, eventDetails: Input.ChangeEventDetails) => void)`	-	Callback fired when the `value` changes. Use when controlled.
className	`string \| ((state: Input.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Input.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Input.State) => ReactElement)`	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Input Data Attributes:

Attribute	Type	Description
data-disabled	-	Present when the input is disabled.
data-valid	-	Present when the input is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the input is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the input's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the input has been touched (when wrapped in Field.Root).
data-filled	-	Present when the input is filled (when wrapped in Field.Root).
data-focused	-	Present when the input is focused (when wrapped in Field.Root).

Accessibility

Native <input>; all native keyboard behavior applies.
Base UI's Input integrates with its Field component for labels, descriptions, and validation state. Nyte does not wrap Field yet; wire aria-* by hand or use the headless @nyte-ai/ui subpaths.
Focus: border moves to --nyte-color-ring and a 2px --nyte-color-focus-ring shadow appears on :focus-visible. See Focus for why the ring color is gated.

Styling

Token	Role
`--nyte-control-height-md`	Minimum height (28px)
`--nyte-control-padding-lg` / `-sm`	Horizontal / vertical padding
`--nyte-radius-field`	Corner radius
`--nyte-color-field-background`	Background
`--nyte-color-border`, `-ring`, `-destructive`	Border by state
`--nyte-color-muted-foreground`	Placeholder
`--nyte-control-disabled-opacity`	Disabled