# FieldError

> A native form field's validation message, styled at a small size in the danger foreground color.

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

Renders a field's validation message. `id` falls back to `handle.id` so
a sibling `aria-describedby` can target it via `data-field-error`; pass
`hidden` to keep it out of layout until the field is invalid.

## Examples

```tsx
<input id="email" type="email" required aria-describedby="email-error" />
<FieldError id="email-error">{t("fields.email.required")}</FieldError>
```

```tsx
<input type="email" required aria-describedby={handle.id} />
<FieldError hidden={!errors.email}>{errors.email}</FieldError>
```

## Props

Also accepts everything in `TagProps<"span">`.