Field
A form control with its label, hint and error, wired together for screen readers.
Lowercase and dashes.
<Field label="Project name" description="Lowercase and dashes.">
<Input defaultValue="robin" />
</Field>Props
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/field.jsonThe CLI writes components/ikada/field.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Label. Or take it from the package: import { Field } from "@sproutboat/ikada";
Usage
import { Field } from "@/components/ikada/field";
<Field label="Project name" description="Lowercase and dashes.">
<Input defaultValue="robin" />
</Field>Examples
Lowercase and dashes.
<Field label="Project name" description="Lowercase and dashes.">
<Input defaultValue="robin" />
</Field><Field label="Domain" required>
<Input required placeholder="robin.sproutboat.app" />
</Field>robin.sproutboat.app is already taken.
<Field label="Domain" error="robin.sproutboat.app is already taken.">
<Input defaultValue="robin.sproutboat.app" />
</Field>Fixed once the sprout exists.
<Field label="Region" description="Fixed once the sprout exists." disabled>
<Input defaultValue="eu-west" disabled />
</Field>Props
| Prop | Type | Description |
|---|---|---|
| className | string | Classes merged onto the root element, after ikada's own. |
| labelrequired | 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. |
| childrenrequired | 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. |
Also takes every prop of Omit<ComponentProps<typeof BaseField.Root>, "className" | "children">.
Source: src/components/field.tsx