# TextField

> A convenience wrapper composing a labeled, described, and validated field in one call: a caption through Label, the control through Input, an optional supporting passage through Description, and an optional validation message through FieldError.

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

Composes Label, Input, Description, and
FieldError into one field, computing every id and
`aria-describedby` link from this instance's own stable identifier.

## Examples

```tsx
<TextField label={t("form.email.label")} type="email" name="email" required />
```

```tsx
<TextField
	label={t("form.password.label")}
	type="password"
	name="password"
	description={t("form.password.hint")}
/>
```

```tsx
<TextField
	label={t("form.username.label")}
	name="username"
	defaultValue="ab"
	errorMessage={t("form.username.tooShort")}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the control's focus ring. Defaults to `"neutral"` when omitted. |
| `label` | `RemixNode` | The field's caption, rendered through Label and associated with the control through a native `for`/`id` relationship computed from this instance's own identifier. |
| `description?` | `RemixNode` | Supporting copy rendered through Description beneath the control and referenced by the control's `aria-describedby`. Omit to render no description. |
| `errorMessage?` | `RemixNode` | Validation message rendered through FieldError beneath the control, marking `aria-invalid` unless set explicitly. Falls back to a Form's own `issues` message by `name`; an explicit value wins. |
| `autoFocus?` | `boolean` | Native `autofocus`. Defaults to `true` for the first invalid field of an enclosing Form's `issues`, landing keyboard focus on the problem with no client JavaScript; pass explicitly to override. |
| `type?` | `"text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| "number"` | Native `<input>` `type`. Defaults to DEFAULT_TYPE. |
| `name?` | `string` | Native `name` submitted with an enclosing form. |
| `value?` | `string` | Current value, for a control a consumer tracks itself. |
| `defaultValue?` | `string` | Initial value, for a control left to the platform's own uncontrolled state. |
| `placeholder?` | `string` | Placeholder copy shown while the control is empty. |
| `required?` | `boolean` | Marks the control required for its enclosing form. |
| `disabled?` | `boolean` | Marks the control inert and excluded from the tab order. |
| `readOnly?` | `boolean` | Marks the control's value fixed, while keeping it focusable and included in form submission. |
| `autoComplete?` | `string` | Native autofill hint, e.g. `"email"` or `"current-password"`. |
| `pattern?` | `string` | Native validation pattern the control's value must match. |
| `minLength?` | `number` | Minimum accepted value length. |
| `maxLength?` | `number` | Maximum accepted value length. |
| `parts?` | `PartsProps` | Per-part styling for this wrapper's internally composed elements. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the control's keyboard focus ring, each mapped to its matching `--ui-*` variables. |
| `Type` | `"text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| "number"` | Native `<input>` `type` this wrapper renders a single-line, text-like control for. |