Form Inputs
Form controls allow users to enter information and make selections. They are essential for collecting user input and enabling interaction with the application.
Text Input
Text inputs allow users to enter and edit text.
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" className="rounded-2xl" />
</div>Checkbox
Checkboxes allow users to select one or more items from a set.
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>Radio Group
Radio buttons allow users to select one option from a set.
<RadioGroup defaultValue="option-one">
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-one" id="option-one" />
<Label htmlFor="option-one">Option One</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option-two" id="option-two" />
<Label htmlFor="option-two">Option Two</Label>
</div>
</RadioGroup>Switch
Switches toggle the state of a single setting on or off.
<div className="flex items-center space-x-2">
<Switch id="airplane-mode" />
<Label htmlFor="airplane-mode">Airplane Mode</Label>
</div>