# Field

A form control with its label, hint and error, wired together for screen readers.

Source page: https://sproutboat.com/ikada/components/field

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/field.json
```
Or from the package: `import { Field } from "@sproutboat/ikada";`
## Usage
```tsx
import { Field } from "@/components/ikada/field";

<Field label="Project name" description="Lowercase and dashes.">
  <Input defaultValue="robin" />
</Field>
```
## Examples
### With a hint
The label and the hint are wired to the control, so screen readers read both.
```tsx
<Field label="Project name" description="Lowercase and dashes.">
  <Input defaultValue="robin" />
</Field>
```
### Required
The asterisk is for sighted users; set required on the control for validation.
```tsx
<Field label="Domain" required>
  <Input required placeholder="robin.sproutboat.app" />
</Field>
```
### Error
A message makes the field invalid and is announced.
```tsx
<Field label="Domain" error="robin.sproutboat.app is already taken.">
  <Input defaultValue="robin.sproutboat.app" />
</Field>
```
### Disabled

```tsx
<Field label="Region" description="Fixed once the sprout exists." disabled>
  <Input defaultValue="eu-west" disabled />
</Field>
```
## Props
### FieldProps
Also takes every prop of `Omit<ComponentProps<typeof BaseField.Root>, "className" | "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| label | `ReactNode` | Visible label, linked to the control inside. |
| description? | `ReactNode` | Muted help text under the control, linked as its description. |
| error? | `ReactNode` | When set the field is invalid and the message is announced. |
| required? | `boolean` | Adds an asterisk to the label. Set `required` on the control too for validation. |
| children | `ReactNode` | One control: Input, Select, Checkbox... Base UI wires id and aria. |
| style? | `CSSProperties \| ((state: FieldRootState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, FieldRootState>` | 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. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/field.tsx