Select

Select is a dropdown select component with size variants, visual styles, and validation states.

Open in Storybook

Import

import { Select } from "@tosui/react";

Basic Usage

Preview

Code

<Select>
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</Select>

Sizes

Preview

Small selectMedium select (default)Large select

Code

<VStack gap={4}>
  <Select size="sm">
    <option>Small select</option>
  </Select>
  <Select size="md">
    <option>Medium select (default)</option>
  </Select>
  <Select size="lg">
    <option>Large select</option>
  </Select>
</VStack>

Variants

Preview

Outline variant (default)Filled variant

Code

<VStack gap={4}>
  <Select variant="outline">
    <option>Outline variant (default)</option>
  </Select>
  <Select variant="filled">
    <option>Filled variant</option>
  </Select>
</VStack>

States

Preview

Normal selectDisabled selectInvalid select

Code

<VStack gap={4}>
  <Select>
    <option>Normal select</option>
  </Select>
  <Select disabled>
    <option>Disabled select</option>
  </Select>
  <Select isInvalid>
    <option>Invalid select</option>
  </Select>
</VStack>

With FormField

Use with FormField for labels and validation messages.

<FormField label="Country" isRequired>
  <Select>
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
  </Select>
</FormField>

<FormField
  label="Category"
  errorMessage="Please select a category"
  isInvalid
  isRequired
>
  <Select>
    <option value="">Choose category...</option>
  </Select>
</FormField>

Props Reference

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Select size
variant	"outline" | "filled"	"outline"	Visual variant
disabled	boolean	false	Disable the select
isInvalid	boolean	false	Show invalid state

Select also accepts all native <select> attributes and Box styling props.

TypeScript

import { Select, type SelectSize, type SelectVariant, type SelectProps } from "@tosui/react";