Native Select

A styled native HTML select element with consistent design system integration.

For a styled select component, see the Select component.

@react.component
let make = () =>
  <NativeSelect>

Installation


npx shadcn@latest add @rescript-shadcn/NativeSelect

Usage

<NativeSelect>
  <NativeSelect.Option value=""> {"Select a fruit"->React.string} </NativeSelect.Option>
  <NativeSelect.Option value="apple"> {"Apple"->React.string} </NativeSelect.Option>
  <NativeSelect.Option value="banana"> {"Banana"->React.string} </NativeSelect.Option>
  <NativeSelect.Option value="blueberry"> {"Blueberry"->React.string} </NativeSelect.Option>
  <NativeSelect.Option value="pineapple"> {"Pineapple"->React.string} </NativeSelect.Option>
</NativeSelect>

Examples

Groups

Use NativeSelectOptGroup to organize options into categories.

@react.component
let make = () =>
  <NativeSelect>

Disabled

Add the disabled prop to the NativeSelect component to disable the select.

@react.component
let make = () =>
  <NativeSelect disabled={true}>

Invalid

Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.

@react.component
let make = () =>
  <NativeSelect invalid={true}>

Native Select vs Select

Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
Use Select for custom styling, animations, or complex interactions.

API Reference

NativeSelect

The main select component that wraps the native HTML select element.

<NativeSelect>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

NativeSelectOption

Represents an individual option within the select.

Prop	Type	Default
`value`	`string`
`disabled`	`bool`	`false`

NativeSelectOptGroup

Groups related options together for better organization.

Prop	Type	Default
`label`	`string`
`disabled`	`bool`	`false`

<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple"> {"Apple"->React.string} </NativeSelectOption>
  <NativeSelectOption value="banana"> {"Banana"->React.string} </NativeSelectOption>
</NativeSelectOptGroup>