Select

<View width="300px" maxWidth="100%">
  <Select options={[{ label: "Following", value: "1" }, { label: "Popular", value: "2" }, { label: "New & Noteworthy", value: "3" }]} name="sort" placeholder="Sort by" />
</View>

Form fields have a required name property, so that's the only property you have to pass to Select to start using it. If you need to handle its change events - add an onChange property to it.

<Select
  name="animal"
  placeholder="Select an animal"
  onChange={(args) => console.log(args)}
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
/>

Same as when using native inputs in React, Select can be used as a controlled or uncontrolled component. By default, Select is uncontrolled and lets you define its default value using the defaultValue property. In this case, all change events are handled automatically. This approach is helpful when you're populating the field default value from a data source, but you don't need to control it manually afterward.

<Select
  name="animal2"
  placeholder="Select an animal"
  defaultValue="dog"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
/>

If you need to control the state of the field manually, you can use the value property. That will give you complete control of the component value and will stop handling the value automatically. You will have to update the state using the onChange handler and will be able to add custom logic before that happens.

<Select
  name="animal3"
  placeholder="Select an animal"
  onChange={({ value }) => {
    /* Update your state here */
  }}
  value="dog"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
/>

Select supports a content slot on the left side, which you can use for displaying text or other components.

<Select
  name="animal6"
  placeholder="Select account"
  options={[
    { label: "hello@reshaped.so", value: "1" },
    { label: "updates@reshaped.so", value: "2" },
  ]}
  startSlot={<Avatar src="/img/examples/avatar-3.png" initials="P" size={5} />}
/>

For consistent Icon usage in text fields, you can use the icon property instead of startSlot and pass the icon SVG component.

<Select
  name="animal"
  placeholder="Select an animal"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
  icon={IconZap}
/>

Select comes in 3 sizes, with the medium size used by default. All sizes are aligned with sizes of other related components like Button or TextField.

<View gap={3}>
  <Select
    size="medium"
    name="animal"
    placeholder="Select an animal"
    options={[
      { label: "Dog", value: "dog" },
      { label: "Turtle", value: "turtle" },
    ]}
    icon={IconZap}
  />
  <Select
    size="large"
    name="animal"
    placeholder="Select an animal"
    options={[
      { label: "Dog", value: "dog" },
      { label: "Turtle", value: "turtle" },
    ]}
    icon={IconZap}
  />
  <Select
    size="xlarge"
    name="animal"
    placeholder="Select an animal"
    options={[
      { label: "Dog", value: "dog" },
      { label: "Turtle", value: "turtle" },
    ]}
    icon={IconZap}
  />
</View>

Select supports responsive syntax for its size property, which means you can change its size based on the viewport.

<Select
  size={{ s: "medium", l: "xlarge" }}
  name="animal"
  placeholder="Select an animal"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
  icon={IconZap}
/>

If you want to alternate the styles of the select, you can use its faded variant.

<Select
  variant="faded"
  name="animal"
  placeholder="Select an animal"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
  icon={IconZap}
/>

Otherwise, you can also use the headless variant which removes most of the styles from the select and lets you use it for custom layouts.

<Select
  variant="headless"
  name="animal"
  placeholder="Select an animal"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
  icon={IconZap}
/>

You can use hasError property to show the user that Select is not passing the form validation.

<Select
  name="animal4"
  placeholder="Select an animal"
  hasError
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
/>

Select can be disabled with the disabled flag. Remember that disabling the field will remove it from the form submit query.

<Select
  disabled
  name="animal5"
  placeholder="Select an animal"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
/>

You can use Select without passing options to only render the trigger as a button and combine it with other components, like DropdownMenu or Modal.

<DropdownMenu width="trigger">
  <DropdownMenu.Trigger>
    {(attributes) => (
      <Select
        name="animal"
        placeholder="Select an animal"
        inputAttributes={attributes}
      />
    )}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Turtle</DropdownMenu.Item>
    <DropdownMenu.Item>Cat</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

To let the user know what data you expect them to type in, add labels or status messages to your fields with the help of the FormControl utility. In case you're using xlarge Select size, you can also combine it with the large FormControl size for better visual alignment.

Note: Don't use placeholders as labels for the fields as users won't see the placeholder when input contains a value.

<FormControl>
  <FormControl.Label>Email</FormControl.Label>
  <Select
    name="animal7"
    placeholder="Select an animal"
    options={[
      { label: "Dog", value: "dog" },
      { label: "Turtle", value: "turtle" },
    ]}
  />
</FormControl>

<Select
  name="animal8"
  placeholder="Select an animal"
  options={[
    { label: "Dog", value: "dog" },
    { label: "Turtle", value: "turtle" },
  ]}
  inputAttributes={{ "aria-label": "Animal" }}
/>