On this page

Field

A flexible field component with legend and fieldset support.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/field

Lineage

Spoke

Anatomy

import {
	Field,
	FieldLabel,
	FieldDescription,
	FieldError,
	Fieldset,
	FieldsetLegend,
} from "@/components/ui/field"

export default () => (
	<Fieldset>
		<FieldsetLegend />
		<Field>
			<FieldLabel />
			<FieldDescription />
			<FieldError />
		</Field>
	</Fieldset>
)

Spoke utility classes

This component uses base design tokens for styling and has no whitelabel CSS variables.