Field
A component that provides labelling and validation for form controls.
Field wraps the Base UI
Field primitive and ships the
Fieldset composition in the same item, so a form groups its labels, descriptions
and validation messages without a second install. Each part marks itself with
data-slot.
Installation
npx shadcn@latest add @kosori/fieldExample
field-example.tsx
import {
Field,
FieldDescription,
FieldLabel,
Fieldset,
FieldsetLegend,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
const FieldExample = () => (
<Fieldset className='flex w-full flex-col gap-6'>
<FieldsetLegend>Billing Details</FieldsetLegend>
<Field>
<FieldLabel>Company</FieldLabel>
<Input placeholder='Enter company name' type='text' />
<FieldDescription>
The name that will appear on invoices.
</FieldDescription>
</Field>
<Field>
<FieldLabel>Tax ID</FieldLabel>
<Input placeholder='Enter tax identification number' type='text' />
<FieldDescription>
Your business tax identification number.
</FieldDescription>
</Field>
</Fieldset>
);
export default FieldExample;
Usage
import {
Field,
FieldDescription,
FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
const FieldDemo = () => (
<Field>
<FieldLabel htmlFor='kosori-email'>Email</FieldLabel>
<Input id='kosori-email' placeholder='you@example.com' type='email' />
<FieldDescription>Shown on your public profile.</FieldDescription>
</Field>
);