Forms & inputs
Form fields and interactive controls that keep their accessible labels.
Forms & inputs
Inputs, switches and checkboxes
Preview
import { Label, Input, Textarea, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Switch, Checkbox } from "nextguide/ui"
<div className="grid max-w-md gap-5">
<div className="grid gap-2"><Label htmlFor="ng-demo-name">Site name</Label><Input id="ng-demo-name" defaultValue="My docs" /></div>
<div className="flex items-center gap-3"><Switch id="ng-demo-switch" defaultChecked /><Label htmlFor="ng-demo-switch">Enable theme toggle</Label></div>
<div className="flex items-center gap-3"><Checkbox id="ng-demo-toc" defaultChecked /><Label htmlFor="ng-demo-toc">Show table of contents</Label></div>
</div>
Multiline and selection
Preview
import { Label, Input, Textarea, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Switch, Checkbox } from "nextguide/ui"
<div className="grid max-w-md gap-4">
<div className="grid gap-2"><Label htmlFor="ng-demo-description">Description</Label><Textarea id="ng-demo-description" defaultValue="Documentation for my app." /></div>
<div className="grid gap-2"><Label htmlFor="ng-demo-language">Language</Label><Select defaultValue="en"><SelectTrigger id="ng-demo-language"><SelectValue placeholder="Select a language" /></SelectTrigger><SelectContent><SelectItem value="en">English</SelectItem><SelectItem value="pl">Polish</SelectItem></SelectContent></Select></div>
</div>
Select uses an accessible, keyboard-operated NextGuide dropdown with themed options. NativeSelect remains available only when an operating-system select menu is specifically desired.