Select

A form component that provides a styled custom selection menu for picking singular values.
For more information on this component configuration, visit Radix UI

Disabled

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

Disabled Item

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.

Invalid

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

Sizes

Use the select-{slot}-{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-select-trigger-cursor: default;
 
  --ex-select-trigger-font-family: var(--font-sans);
  --ex-select-trigger-font-weight: var(--font-weight-normal);
 
  --ex-select-trigger-font-size-sm: var(--text-xs);
  --ex-select-trigger-font-size-md: var(--text-sm);
  --ex-select-trigger-font-size-lg: var(--text-base);
 
  --ex-select-trigger-height-sm: calc(var(--spacing) * 9);
  --ex-select-trigger-height-md: calc(var(--spacing) * 10);
  --ex-select-trigger-height-lg: calc(var(--spacing) * 11);
 
  --ex-select-trigger-px-sm: calc(var(--spacing) * 3.5);
  --ex-select-trigger-px-md: calc(var(--spacing) * 4);
  --ex-select-trigger-px-lg: calc(var(--spacing) * 4.5);
 
  --ex-select-trigger-radius-sm: var(--radius-sm);
  --ex-select-trigger-radius-md: var(--radius-sm);
  --ex-select-trigger-radius-lg: var(--radius-sm);
 
  --ex-select-trigger-icon-size-sm: var(--text-lg);
  --ex-select-trigger-icon-size-md: var(--text-xl);
  --ex-select-trigger-icon-size-lg: var(--text-2xl);
 
  --ex-select-content-max-w-sm: var(--container-3xs);
  --ex-select-content-max-w-md: var(--container-2xs);
  --ex-select-content-max-w-lg: var(--container-xs);
 
  --ex-select-content-radius-sm: var(--radius-sm);
  --ex-select-content-radius-md: var(--radius-sm);
  --ex-select-content-radius-lg: var(--radius-sm);
 
  --ex-select-content-shadow-sm: var(--shadow-sm);
  --ex-select-content-shadow-md: var(--shadow-sm);
  --ex-select-content-shadow-lg: var(--shadow-sm);
 
  --ex-select-content-section-gap-x-sm: calc(var(--spacing) * 1.5);
  --ex-select-content-section-gap-x-md: calc(var(--spacing) * 2);
  --ex-select-content-section-gap-x-lg: calc(var(--spacing) * 2.5);
 
  --ex-select-content-section-px-sm: calc(var(--spacing) * 1.5);
  --ex-select-content-section-px-md: calc(var(--spacing) * 2);
  --ex-select-content-section-px-lg: calc(var(--spacing) * 2.5);
 
  --ex-select-content-section-py-sm: calc(var(--spacing) * 2);
  --ex-select-content-section-py-md: calc(var(--spacing) * 2.5);
  --ex-select-content-section-py-lg: calc(var(--spacing) * 3);
 
  --ex-select-content-item-font-family: var(--font-sans);
  --ex-select-content-item-font-weight: var(--font-weight-normal);
 
  --ex-select-content-item-font-size-sm: var(--text-sm);
  --ex-select-content-item-font-size-md: var(--text-sm);
  --ex-select-content-item-font-size-lg: var(--text-sm);
 
  --ex-select-content-item-px-sm: calc(var(--spacing) * 2);
  --ex-select-content-item-px-md: calc(var(--spacing) * 2);
  --ex-select-content-item-px-lg: calc(var(--spacing) * 2);
 
  --ex-select-content-item-py-sm: calc(var(--spacing) * 1);
  --ex-select-content-item-py-md: calc(var(--spacing) * 1);
  --ex-select-content-item-py-lg: calc(var(--spacing) * 1);
 
  --ex-select-content-item-indicator-font-size-sm: var(--text-sm);
  --ex-select-content-item-indicator-font-size-md: var(--text-base);
  --ex-select-content-item-indicator-font-size-lg: var(--text-lg);
 
  --ex-select-content-label-font-family: var(--font-sans);
  --ex-select-content-label-font-weight: var(--font-weight-normal);
  --ex-select-content-label-opacity: var(--ex-options-opacity-muted);
 
  --ex-select-content-label-font-size-sm: var(--text-2xs);
  --ex-select-content-label-font-size-md: var(--text-xs);
  --ex-select-content-label-font-size-lg: var(--text-sm);
}

API

For more information on this component configuration, visit Radix UI

Select

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`defaultValue`	`string`	`false`
`disabled`	`boolean`	`false`
`name`	`string`
`open`	`boolean`	`false`
`required`	`boolean`	`false`
`value`	`string`
`onOpenChange`	`function`
`onValueChange`	`function`

Select Trigger

Element	Selector
`Select.Trigger`	`.ex-select-trigger`

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

Select Value

Element	Selector
`Select.Value`	`.ex-select-value`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`placeholder`	`React.Node`

Select Icon

Element	Selector
`Select.Icon`	`.ex-select-icon`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`placeholder`	`React.Node`

Select Portal

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Select Content

Element	Selector
`Select.Content`	`.ex-select-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`align`	`enum of ["start", "center", "end"]`	`start`
`alignOffset`	`number`	`0`
`arrowPadding`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`hideWhenDetached`	`boolean`	`false`
`position`	`enum of ["item-aligned", "popper"]`	`item-aligned`
`side`	`enum of ["top", "right", "bottom", "left"]`	`bottom`
`sideOffset`	`number`	`0`
`sticky`	`enum of ["always", "partial"]`	`partial`
`onCloseAutoFocus`	`function`
`onPointerDownOutside`	`function`

Select Section

Element	Selector
`ContextMenu.Section`	`.ex-select-body`

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

Select Arrow

Element	Selector
`Select.Arrow`	`.ex-select-arrow`

Prop	Type	Default
`asChild`	`boolean`	`false`

Select Group

Element	Selector
`Select.Group`	`.ex-select-group`

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

Select Item

Element	Selector
`Select.Item`	`.ex-select-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`value`	`string`

Select Item Text

Element	Selector
`Select.ItemText`	`.ex-select-item-text`

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

Select Item Indicator

Element	Selector
`Select.ItemIndicator`	`.ex-select-item-indicator`

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

Select Label

Element	Selector
`Select.Label`	`.ex-select-label`

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

Select Separator

Element	Selector
`Select.Separator`	`.ex-select-separator`

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

Select Viewport

Element	Selector
`Select.Viewport`	`.ex-select-viewport`

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

Select Scroll Up Button

Element	Selector
`Select.ScrollUpButton`	`.ex-select-scroll-up-button`

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

Select Scroll Down Button

Element	Selector
`Select.ScrollDownButton`	`.ex-select-scroll-down-button`

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