NativeSelect

A compact select with native-feeling keyboard behaviour.

NativeSelectProps packages/core/src/form-controls.ts:268 ↗

Import

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

Usage

NativeSelect.tsx

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

let size = "m";

<NativeSelect
  id="size"
  value={size}
  placeholder="Size"
  options={[
    { value: "s", label: "Small" },
    { value: "m", label: "Medium" },
    { value: "l", label: "Large" },
  ]}
  onValueChange={(value) => {
    size = value;
  }}
/>

Props

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

Common props

Shared by every component. See descriptions →

highlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

SelectOption

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