Skip to content
Pavo

Field

A label, a control, a description and an error, in that order.

Installation

pnpm dlx shadcn@latest add @pavo/field

Default

Label to control: related.

With description

Tight under the control.

Shown on your comments and tasks.

With error

invalid on the field, aria-invalid on the control, FieldError last.

Members see it in the sidebar.

Several errors

FieldError errors lists them.

With title

A control that is not an input is named by FieldTitle through aria-labelledby.

Color

Shown as a dot next to the project name.

Pills

Pills sit under their label: TabsRadioGroup.

Columns

FieldGroup columns=2 for short peers.

Horizontal

Settings: orientation='horizontal' puts the label and description beside the control. Beside an input or a select they center on it; beside a checkbox or radio they start on its line.

Notifications

How you hear about changes to your tasks.

Each update as it happens, or one email in the morning.

Skip updates unless someone mentions you.

Legend

FieldSet · FieldLegend: variant='legend' heads a section of fields; the default label names one question.

Notifications
Notify me about

In a card

A form is fields in a card; the footer shows while there are changes.

Profile

What other members of the workspace see.

Task updates and invoices go to this address.

Unsaved changes

In a form

With react-hook-form, Controller renders the Field. Submit to see the error.

We send the invitation to this address.

Disabled

disabled on the field mutes the label; the control takes its own.

Only owners can change it.