# Input (/cloud/primitives/input)



```ts title="Import"
import { Input } from "@nyte-ai/ui";
```

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

## Usage [#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](/cloud/primitives/textarea).

## Anatomy [#anatomy]

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

## Examples [#examples]

<Preview>
  <InputDemo />
</Preview>

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

## Props [#props]

| Prop                           | Type                                      | Default | Description                  |
| ------------------------------ | ----------------------------------------- | ------- | ---------------------------- |
| `unstyled`                     | `boolean`                                 | `false` | Render with no StyleX class. |
| `className`, `style`, `xstyle` | see [Theming](/cloud/foundations/theming) |         |                              |

A native input element that automatically works with [Field](https://base-ui.com/react/components/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&#xA;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&#xA;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&#xA;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 [#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`](/cloud/headless) subpaths.
* Focus: border moves to `--nyte-color-ring` and a 2px `--nyte-color-focus-ring` shadow appears on
  `:focus-visible`. See [Focus](/cloud/foundations/focus) for why the ring color is gated.

## Styling [#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                      |