Page

Default

Renders a standard HTML select element with options.

Select
Select with icon

Variant

The select component supports plain (default), violet, green, and ghost variants. Ghost variants provide a borderless appearance with higher contrast backgrounds.

plain
plain with icon
plain disabled
violet
violet with icon
violet disabled
green
green with icon
green disabled
ghost plain
ghost plain with icon
ghost plain disabled
ghost violet
ghost violet with icon
ghost violet disabled
ghost green
ghost green with icon
ghost green disabled

Size

Use size to control control height. The sm size is 32px.

md
md with icon
sm
sm with icon

Invalid

Use the invalid state to indicate validation errors.

Select

This field is required

Select with icon

This field is required

Disabled

Shows a disabled select.

Select
Select with icon

Description

Add context with description text positioned above or below the select.

above

Use the name you'd like people to see in their cart.

below

Use the name you'd like people to see in their cart.

Overflow

The select component handles text overflow when the content exceeds the available width.