# Input

> A single-line native form field for free text entry, rendered as a bordered, rounded `<input>` whose border, background, and focus ring read from a semantic color role.

```ts
import { Input } from "@sdxc/ui";
```

Renders a native `<input>` host colored via `data-color`, with hover,
focus, and disabled states driven by native pseudo-classes; `[aria-invalid="true"]`
together with `:user-invalid` forces the danger tone regardless of `color`.

## Examples

```tsx
<Label htmlFor="email">{t("form.email.label")}</Label>
<Input id="email" type="email" required />
```

```tsx
<Input
	aria-label={t("form.search.label")}
	color="brand"
	placeholder={t("form.search.placeholder")}
/>
```

```tsx
<Input id="username" aria-describedby="username-error" aria-invalid="true" />
<FieldError id="username-error">{t("form.username.taken")}</FieldError>
```

## Props

Takes no props of its own.

## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the focus-visible ring, each mapped to its matching `--ui-*` variables. |