Field

A label, a hint and an error around a form control, with the ids and aria attributes wired up.

$ pnpm dlx shadcn@latest add https://dashral.com/r/field.json

Team URL

dashral.com/

Letters, numbers and dashes.

This URL is taken.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/field.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/field

Usage

example.tsx

1import { Input } from "@/components/dashral/input"
2import { Field } from "@/components/dashral/field"
3
4<Field label="Team URL" description="Letters, numbers and dashes." error={taken && "This URL is taken."}>
5  <Input prefix="acme.com/" name="slug" />
6</Field>

Examples

Password, built by hand

The strength in labelAction, rules that tick in the description, and an error only after you try to continue.

A control of your own

useFieldControl gives a custom star rating the label, description, error and aria a built-in control gets.

API reference

Field

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`id`	`string` The control's id. Generated when left out.	—
`required / disabled`	`boolean` Passed on to the control.	`false`
`classNames`	`{ label, description, error }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

FieldLabel

The label every field uses, for a control of your own. It dims with a disabled field.

Also takes every prop of Radix Label(opens in a new tab).

Accessibility

The control inside gets its id, aria-describedby (hint and error) and aria-invalid from the Field.
The error message fades in; with reduced motion it doesn't move.