NextGuide

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.