Form Elements

Building forms with React Hook Form and Zod. For more detailed examples and guidelines please React hook form

Input

View example's code

import { Input } from "@/components/ui/input";
<Input placeholder="Text Input" />;

---

Textarea

View example's code

import { Textarea } from "@/components/ui/textarea";
<Textarea placeholder="Text Input" />;

---

Checkbox

View example's code

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox checked /> Checked checkbox
<Checkbox /> Default checkbox

---

Radio

View example's code

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";

<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>;

---

Select

Theme

View example's code

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

---

Switch

View example's code

import { Switch } from "@/components/ui/switch";
<Switch />;