Components

Input

A single-line text field, framed alone or inside a group

Import

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

InputGroup frames an Input with the icons or controls beside it. For multi-line text, use Textarea.

Usage

Inside an InputGroup, set size and variant on the group. The Input drops its frame and fills the row.

Anatomy

<InputGroup>
  <Icon />
  <Input />
</InputGroup>

Examples

<Input placeholder="Chat name" aria-label="Chat name" />
<Input variant="quiet" type="password" placeholder="Paste your API key" aria-label="API key" />
<Input placeholder="Server URL" aria-label="Server URL" aria-invalid defaultValue="not-a-url" />

In a group

<InputGroup>
  <Icon name="search" size={12} />
  <Input placeholder="Search" aria-label="Search workspace" />
</InputGroup>
<InputGroup variant="quiet">
  <Icon name="search" size={13} />
  <Input placeholder="Search models" aria-label="Search models" />
</InputGroup>

Controlled

const [query, setQuery] = useState("");

<Input aria-label="Search" value={query} onValueChange={setQuery} />;

Props

Input

Takes every Base UI Input prop except the native size attribute. className and style take plain values, not functions of state.

Prop	Type	Default
`variant`	`"raised" \| "quiet" \| "bare"`	`"raised"`, `"bare"` inside a group
`size`	`"md" \| "lg" \| "xl"`	`"md"`, or the group's size
`className`, `style`, `xstyle`	see Theming

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

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).

InputGroup

Takes every native <label> attribute.

Prop	Type	Default	Description
`variant`	`"raised" \| "quiet"`	`"raised"`
`size`	`"md" \| "lg" \| "xl"`	`"md"`	Height, and the size of its `Input`.
`className`, `style`, `xstyle`	see Theming

Accessibility

InputGroup renders a <label>. An aria-label on the input still wins as its name.
Focus recolors the border of the input, or of its group.