Selectcomponent
component
A dropdown component with support for grouped options and disabled states. You can view the Storybook for more interactive examples.
Was this section helpful?
Select
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
<Select defaultValue="option-1">
<SelectTrigger>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option-1">Option 1</SelectItem>
<SelectItem value="option-2">Option 2</SelectItem>
<SelectItem value="option-3">Option 3</SelectItem>
</SelectContent>
</Select>
)
}
examples
Select
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <Select defaultValue="option-1"> <SelectTrigger> <SelectValue placeholder="Select an option" /> </SelectTrigger> <SelectContent> <SelectItem value="option-1">Option 1</SelectItem> <SelectItem value="option-2">Option 2</SelectItem> <SelectItem value="option-3">Option 3</SelectItem> </SelectContent> </Select> ) }
Preview
Anchor to examplesExamples
Select configurations and grouping options
Anchor to example-default-selectDefault select
Basic dropdown with options
Anchor to example-grouped-optionsGrouped options
Dropdown with grouped options
Anchor to example-disabled-stateDisabled state
A disabled select dropdown
Was this section helpful?
Default select
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
<Select defaultValue="option-1">
<SelectTrigger>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option-1">Option 1</SelectItem>
<SelectItem value="option-2">Option 2</SelectItem>
<SelectItem value="option-3">Option 3</SelectItem>
</SelectContent>
</Select>
)
}
examples
Default select
description
Basic dropdown with options
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <Select defaultValue="option-1"> <SelectTrigger> <SelectValue placeholder="Select an option" /> </SelectTrigger> <SelectContent> <SelectItem value="option-1">Option 1</SelectItem> <SelectItem value="option-2">Option 2</SelectItem> <SelectItem value="option-3">Option 3</SelectItem> </SelectContent> </Select> ) }Grouped options
description
Dropdown with grouped options
import {Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <Select defaultValue="option-1"> <SelectTrigger> <SelectValue placeholder="Select an option" /> </SelectTrigger> <SelectContent> <SelectGroup> <SelectLabel>Group 1</SelectLabel> <SelectItem value="option-1">Option 1</SelectItem> <SelectItem value="option-2">Option 2</SelectItem> </SelectGroup> <SelectGroup> <SelectLabel>Group 2</SelectLabel> <SelectItem value="option-3">Option 3</SelectItem> <SelectItem value="option-4">Option 4</SelectItem> </SelectGroup> </SelectContent> </Select> ) }Disabled state
description
A disabled select dropdown
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@shopify/shop-minis-react' export default function MyComponent() { return ( <Select defaultValue="option-1" disabled> <SelectTrigger> <SelectValue placeholder="Select an option" /> </SelectTrigger> <SelectContent> <SelectItem value="option-1">Option 1</SelectItem> <SelectItem value="option-2">Option 2</SelectItem> <SelectItem value="option-3">Option 3</SelectItem> </SelectContent> </Select> ) }