Select
Native select dropdown with Storm styling. 3 sizes.
Usage
tsx
1import { Select } from '@storm-ds/ui'23<Select>4 <option>Option 1</option>5 <option>Option 2</option>6</Select>Sizes
tsx
1<Select size="sm"><option>Small</option></Select>2<Select size="md"><option>Medium (default)</option></Select>3<Select size="lg"><option>Large</option></Select>With Label
tsx
1<div className="space-y-2">2 <Label htmlFor="country">Country</Label>3 <Select id="country">4 <option>United States</option>5 <option>Canada</option>6 <option>United Kingdom</option>7 </Select>8</div>Disabled
tsx
1<Select disabled><option>Disabled select</option></Select>Error
Please select a category.
tsx
1<div className="space-y-2">2 <Label htmlFor="err-sel">Category</Label>3 <Select id="err-sel" error>4 <option value="">Select a category...</option>5 </Select>6 <p className="text-sm text-storm-destructive">Please select a category.</p>7</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Select size |
| className | string | - | Custom classes |
| error | boolean | false | Shows destructive border and ring |
Use with AI
Create a Next.js component using Storm UI's Select. Import: `import { Select } from '@storm-ds/ui'`. Native select with appearance-none and Storm border styling. Sizes: sm, md, lg. Use `error` prop to show a destructive red border and ring for validation states. Use <option> children. Example: `<Select><option>Option 1</option><option>Option 2</option></Select>`, `<Select error><option>Choose...</option></Select>`