Label
Renders an accessible label associated with controls.
Label composes Base UI's useRender and mergeProps, renders a <label> by
default and marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/labelExample
label-example.tsx
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
const LabelExample = () => (
<div className='flex flex-col items-start gap-2'>
<Label htmlFor='kosori-email'>Email</Label>
<Input
aria-label='Email'
id='kosori-email'
placeholder='you@example.com'
type='email'
/>
</div>
);
export default LabelExample;
Usage
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
const LabelDemo = () => (
<div className='flex flex-col items-start gap-2'>
<Label htmlFor='kosori-email'>Email</Label>
<Input id='kosori-email' placeholder='you@example.com' type='email' />
</div>
);