Docs/NativeSelect

NativeSelect

Styled native select element with Storm's border signature. 3 sizes.

Usage

tsx

1import { NativeSelect } from '@storm-ds/ui'
2
3<NativeSelect>
4  <option value="">Choose an option</option>
5  <option value="1">Option 1</option>
6  <option value="2">Option 2</option>
7</NativeSelect>

Sizes

tsx

1<NativeSelect selectSize="sm">
2  <option>Small</option>
3</NativeSelect>
4<NativeSelect selectSize="md">
5  <option>Medium (default)</option>
6</NativeSelect>
7<NativeSelect selectSize="lg">
8  <option>Large</option>
9</NativeSelect>

With Label

Country

tsx

1<Field label="Choose" htmlFor="select">
2  <NativeSelect id="select">
3    <option>-- Select --</option>
4    <option value="1">Option 1</option>
5  </NativeSelect>
6</Field>

Disabled

tsx

1<NativeSelect disabled>
2  <option>Disabled select</option>
3</NativeSelect>

Error State

Please select a country.

tsx

1<NativeSelect error>
2  <option>-- Select --</option>
3  <option value="1">Option 1</option>
4</NativeSelect>

With Groups

tsx

1<NativeSelect>
2  <optgroup label="Group 1">
3    <option value="1-1">Item 1</option>
4    <option value="1-2">Item 2</option>
5  </optgroup>
6  <optgroup label="Group 2">
7    <option value="2-1">Item 3</option>
8  </optgroup>
9</NativeSelect>

Props

Prop	Type	Default	Description
selectSize	'sm' \| 'md' \| 'lg'	'md'	Select size
error	boolean	false	Shows destructive border and ring
className	string	-	Custom classes
children	React.ReactNode	-	Option elements

Use with AI

Create a Next.js component using Storm UI's NativeSelect for native styled select elements. Import: `import { NativeSelect } from '@storm-ds/ui'`. Props: selectSize ('sm', 'md', 'lg'), error (boolean), className, children (option elements). Uses native HTML select for accessibility and performance. Styled with Storm's border signature. Use `error` prop to show destructive red border for validation. Supports optgroup for grouped options. Server component compatible. Example: `<NativeSelect><option>Choose</option><option value="1">Option</option></NativeSelect>`, `<NativeSelect error><option>-- Select --</option></NativeSelect>`, `<NativeSelect selectSize="lg"><optgroup><option>Item</option></optgroup></NativeSelect>`

Select

Label