Documentation

Select

Displays a list of options for the user to pick from — triggered by a button.

Examples

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
} from 'kalki-design'

<Select>
  <SelectTrigger className="w-full sm: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>

Installation

npx kalki-design add select

Usage

import { Select } from 'kalki-design'

export default function Example() {
  return <Select />
}

API Reference

NameTypeDefaultDescription
NamevalueTypestringDefault—DescriptionThe controlled selected value.
NamedefaultValueTypestringDefault—DescriptionThe default value when uncontrolled.
NameonValueChangeType(value: string) => voidDefault—DescriptionCallback fired when the selected value changes.
NamedisabledTypebooleanDefaultfalseDescriptionPrevents interaction.