Select

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

import {
  Select,
  SelectBase,
  SelectPrefix,
  SelectSuffix,
  useSelectProps,
  useSelectState,
  SelectWrapper,
} from "@renderlesskit/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

<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>

<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

<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>

<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.

<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>

<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 18, 2022

Select

Imports#

Usage#

Select Variants#

Select sizes#

Select Prefix#

API Reference#

Imports

Usage

Select Variants

Select sizes

Select Prefix

API Reference