---
title: Select
description: A dropdown component with support for grouped options and disabled states.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/select'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/select.md'
---

# Select

A dropdown component with support for grouped options and disabled states. For full props documentation, see [Radix Select](https://www.radix-ui.com/primitives/docs/components/select).

Examples

## Preview

![select](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Select-Dt8p_dBz.png)

### Examples

* ####

  ##### tsx

  ```tsx
  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>
    )
  }
  ```

* ####

  ##### Description

  Basic dropdown with options

  ##### tsx

  ```tsx
  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>
    )
  }
  ```

* ####

  ##### Description

  Dropdown with grouped options

  ##### tsx

  ```tsx
  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>
    )
  }
  ```

* ####

  ##### Description

  A disabled select dropdown

  ##### tsx

  ```tsx
  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>
    )
  }
  ```

***