Form controls

Select, Checkbox, Radio group, Switch, Slider, Textarea — every input on Base UI primitives.

stable

Source: src/components/ui/ Install: npx shadcn@latest add select checkbox radio-group switch slider textarea --yes

Rendered example — light + dark

Light

Plan

Billing

Monthly Yearly (2 months free)

Email notificationsI accept the terms and conditions

Volume60

Message

Dark

Plan

Billing

Monthly Yearly (2 months free)

Email notificationsI accept the terms and conditions

Volume60

Message

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

import { Select } from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { Switch } from '@/components/ui/switch';

export function Preferences() {
  return (
    <div className="space-y-4">
      <Select items={[{ value: 'sm', label: 'Small' }, { value: 'lg', label: 'Large' }]} />
      <label className="flex items-center gap-2">
        <Checkbox defaultChecked /> Email me updates
      </label>
      <Switch aria-label="Dark mode" />
    </div>
  );
}