Components
Select

Select

Version - 0.0.7

Installation

npm install @volta/select

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@volta/select';
<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Examples

Scrollable

Sizes

Small

Medium

Densed

Large

X-Large

Select Props

The following props are available for select component. These are the custom props that we've added for the select component and you can use all the other native select props as well.

AttributeTypeDescriptionDefault
sizeSizeChange select sizemd
classNamestringAdd custom className for button''