Select

Dropdown select with aligned popup.

Installation

npx @noarka/cli add select

Usage

tsx

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@noarka/ui";

tsx

<div className="max-w-xs">  <Select defaultValue="system">    <SelectTrigger>      <SelectValue />    </SelectTrigger>    <SelectContent>      <SelectItem value="system">System</SelectItem>      <SelectItem value="light">Light</SelectItem>      <SelectItem value="dark">Dark</SelectItem>    </SelectContent>  </Select></div>

Examples

With label

Pair the select with a form label.

Plan

Grouped options

Group items under labels with separators. Items accept disabled.

Disabled

The whole select locks with a single prop.

API reference

Select

Prop	Type	Default
`value` Controlled selected value. Use with onValueChange.	`string`	`-`
`defaultValue` Initially selected value when uncontrolled.	`string`	`-`
`onValueChange` Called when the selection changes.	`(value: string) => void`	`-`
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`disabled` Disable the trigger and popup.	`boolean`	`false`
`required` Require a selection before form submit.	`boolean`	`false`
`name` Identifies the field when the form is submitted.	`string`	`-`

SelectTrigger

Prop	Type	Default
`size` Density. Both sizes currently share the h-8 height.	`"sm" \| "default"`	`"default"`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default trigger styles.	`string`	`-`

SelectValue

Prop	Type	Default
`children` Placeholder rendered when nothing is selected.	`ReactNode`	`-`
`className` Additional classes merged with the default value styles.	`string`	`-`

SelectContent

Prop	Type	Default
`side` Preferred placement side.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`sideOffset` Gap between trigger and popup.	`number`	`4`
`align` Alignment against the trigger edge.	`"start" \| "center" \| "end"`	`"center"`
`alignOffset` Offset along the alignment axis.	`number`	`0`
`alignItemWithTrigger` Line up the selected item with the trigger.	`boolean`	`true`
`render` Polymorphic render prop. Use to render a custom element instead of the default popup.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default popup styles.	`string`	`-`

SelectItem

Prop	Type	Default
`value` Value set on the group when selected.	`string`	`-`
`disabled` Disable the item.	`boolean`	`false`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

SelectGroup

Prop	Type	Default
`className` Additional classes merged with the default group styles.	`string`	`-`

SelectLabel

Prop	Type	Default
`className` Additional classes merged with the default group label styles.	`string`	`-`

SelectSeparator

Prop	Type	Default
`className` Additional classes merged with the default separator styles.	`string`	`-`