Components

Input

A single-line text field with invalid and disabled states

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

A single-line text field. For multi-line text use Textarea.

Usage

Every input needs an accessible name from a <label for>, aria-label, or aria-labelledby. A placeholder is not a name.
Set aria-invalid when validation fails. The border turns destructive.
Width is 100%. Constrain it with the parent.

Examples

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

Unstyled

<Input unstyled xstyle={myStyles.field} aria-label="Search" />

Props

The reference table below comes from Base UI, MIT, © Material-UI SAS.

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

A native <input>, so all native keyboard behavior applies.
There is no styled field wrapper. Wire labels, descriptions, and validation state through aria-* on the input.
The focus ring appears on :focus-visible. See Focus.