Select

inputs

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

Preview

Installation

npm install @launchapp/design-system

Import

import {  SelectRoot, SelectTrigger, SelectValue, SelectContent,  SelectItem, SelectGroup, SelectLabel, SelectSeparator} from "@launchapp/design-system";

Examples

Basic Select

<SelectRoot>  <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>    </SelectGroup>  </SelectContent></SelectRoot>

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	—	Initial value when uncontrolled.
`onValueChange`	`(value: string) => void`	—	Callback when value changes.
`disabled`	`boolean`	`false`	Disables the select.
`placeholder`	`string`	—	Placeholder (on SelectValue).

← PreviousScrollArea

Next →Separator