Select

A themed dropdown for choosing one option.

SelectProps packages/core/src/select.ts:19 ↗

Import

import { Select } from "@tarve/core";

Usage

Select.tsx

import { Select } from "@tarve/core";

let role = "developer";

<Select
  id="role"
  value={role}
  options={[
    { value: "developer", label: "Developer" },
    { value: "designer", label: "Designer" },
    { value: "manager", label: "Manager" },
  ]}
  onValueChange={(value) => {
    role = value;
  }}
  style={{ width: 240 }}
/>

Props

Prop	Type	Default
`id` required	`string`	—
`options` required	`readonly SelectOption[]`	—
`disabled`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	—
`onValueChange`	`(value: string) => void`	—
`open`	`boolean`	—
`placeholder`	`string`	`"Select an option"`
`value`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

SelectOption

interface SelectOption { value: string; label: string; disabled?: boolean }