Native Select

A form component that implements the browser's unstyled drop-down interface for menu choices.

Disabled

Use the disabled attr or the disabled class to disable an item component.

Valid

Use the data-valid attr or the valid class to indicate an valid state.

Name *The quick brown fox jumps over

Name is valid

Invalid

Use the data-invalid attr or the invalid class to indicate an invalid state.

Name *The quick brown fox jumps over

Name is required

Sizes

Use the native-select-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

globals.css


:root {
  --ex-native-select-font-family: var(--font-sans);
  --ex-native-select-font-weight: var(--font-weight-normal);
 
  --ex-native-select-font-size-sm: var(--text-xs);
  --ex-native-select-font-size-md: var(--text-sm);
  --ex-native-select-font-size-lg: var(--text-base);
 
  --ex-native-select-height-sm: calc(var(--spacing) * 9);
  --ex-native-select-height-md: calc(var(--spacing) * 10);
  --ex-native-select-height-lg: calc(var(--spacing) * 11);
 
  --ex-native-select-px-sm: calc(var(--spacing) * 3.5);
  --ex-native-select-px-md: calc(var(--spacing) * 4);
  --ex-native-select-px-lg: calc(var(--spacing) * 4.5);
 
  --ex-native-select-radius-sm: var(--radius-sm);
  --ex-native-select-radius-md: var(--radius-sm);
  --ex-native-select-radius-lg: var(--radius-sm);
 
  --ex-native-select-icon-size-sm: var(--text-lg);
  --ex-native-select-icon-size-md: var(--text-xl);
  --ex-native-select-icon-size-lg: var(--text-2xl);
}

API

Native Select

Element	Selector
`NativeSelect`	`.ex-native-select`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Native Select Field

Element	Selector
`NativeSelect.Field`	`.ex-native-select-field`

Prop	Type	Default
`as`	`ElementType`	`select`
`asChild`	`boolean`	`false`

Native Select Icon

Element	Selector
`NativeSelect.Icon`	`.ex-native-select-icon`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`