Field
A field groups a label, a control and a message.
Field composes Label and
Separator, and each part marks itself with data-slot.
The composition is shipped as two namespaced dependencies, so installing Field
installs the parts it needs.
Installation
npx shadcn@latest add @kosori/fieldExample
field-example.tsx
import {
Field,
FieldDescription,
FieldLabel,
FieldSeparator,
FieldSet,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
const FieldExample = () => (
<FieldSet className='w-full max-w-sm'>
<Field>
<FieldLabel htmlFor='kosori-name'>Name</FieldLabel>
<Input id='kosori-name' placeholder='kosori' />
<FieldDescription>Shown on your public profile.</FieldDescription>
</Field>
<FieldSeparator>or</FieldSeparator>
<Field>
<FieldLabel htmlFor='kosori-email'>Email</FieldLabel>
<Input id='kosori-email' placeholder='you@example.com' type='email' />
</Field>
</FieldSet>
);
export default FieldExample;