Select

The Select component with collection of predefined options is used to pick a value.

import {
  Select,
  SelectBase,
  SelectPrefix,
  SelectSuffix,
  SelectWrapper,
} from "@adaptui/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage


<Select >
  <option value="">Select anyone</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</Select>


<Select >
  <option value="">Select anyone</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</Select>

Disabled

Invalid

Select Variants

Variants can be set using the variant prop. The default variant is outline. The available variants are: outline subtle underline & ghost

import { Select } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Select variant="outline">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select variant="subtle">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select variant="underline">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select variant="ghost">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
    </div>
  );
};

import { Select } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Select variant="outline">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select variant="subtle">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select variant="underline">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select variant="ghost">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
    </div>
  );
};

Select sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

import { Select } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Select size="sm">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select size="md">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select size="lg">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select size="xl">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
    </div>
  );
};

import { Select } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Select size="sm">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select size="md">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select size="lg">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
      <Select size="xl">
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
    </div>
  );
};

Select Prefix

Comes only with prefix prop to append any content inside the Select. Also you can change the default suffix component aswell.

import { Select } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Select prefix={<SlotIcon />}>
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
    </div>
  );
};

import { Select } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Select prefix={<SlotIcon />}>
        <option value="">Select anyone</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </Select>
    </div>
  );
};

API Reference

Prop	Type	Default
`size`	`union`	`md`
`variant`	`union`	`outline`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`false`
`loading`	`boolean`	`false`
`prefix`	`React.ReactNode`	-
`suffix`	`React.ReactNode`	-
`spinner`	`React.ReactNode`	-

Last updated on July 27, 2022

Select

Imports#

Usage#

Select Variants#

Select sizes#

Select Prefix#

API Reference#

Imports

Usage

Select Variants

Select sizes

Select Prefix

API Reference