Select
Displays a list of options for the user to pick from—triggered by a button.
Usage
Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.
const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} = VM.require("uiisnear.near/widget/select");
if (Tailwind == undefined) return "";<Tailwind>
<Select>
<SelectTrigger className="w-96">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>
</Tailwind>API Reference
Select
Contains all the parts of a select.
| Prop | Type | Default |
|---|---|---|
defaultValue | string | --- |
value | string | --- |
onValueChange | function | --- |
defaultOpen | boolean | --- |
open | boolean | --- |
onOpenChange | function | --- |
dir | enum | --- |
name | string | --- |
disabled | boolean | --- |
required | boolean | --- |
SelectTrigger
The button that toggles the select. The SelectContent will position itself by aligning over the trigger.
| Data attribute | Values |
|---|---|
| [data-state] | "open" | "closed" |
| [data-disabled] | Present when disabled |
| [data-placeholder] | Present when has placeholder |
SelectValue
The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.
| Prop | Type | Default |
|---|---|---|
placeholder | ReactNode | --- |
SelectContent
The component that pops out when the select is open.
| Prop | Type | Default |
|---|---|---|
onCloseAutoFocus | function | --- |
onEscapeKeyDown | function | --- |
onPointerDownOutside | function | --- |
position | enum | "item-aligned" |
side | enum | "bottom" |
sideOffset | number | 0 |
align | enum | "start" |
alignOffset | number | 0 |
avoidCollisions | boolean | true |
collisionBoundary | Boundary | [] |
collisionPadding | number | Padding | 0 |
arrowPadding | number | 0 |
sticky | enum | "partial" |
hideWhenDetached | boolean | false |
| Data attribute | Values |
|---|---|
| [data-state] | "open" | "closed" |
| [data-side] | "left" | "right" | "bottom" | "top" |
| [data-align] | "start" | "end" | "center" |
SelectItem
The component that contains the select items.
| Prop | Type | Default |
|---|---|---|
value* | string | --- |
disabled | boolean | --- |
textValue | string | --- |
| Data attribute | Values |
|---|---|
| [data-state] | "checked" | "unchecked" |
| [data-highlighted] | Present when highlighted |
| [data-disabled] | Present when disabled |
SelectLabel
Used to render the label of a group. It won't be focusable using arrow keys.
SelectSeparator
Used to visually separate items in the select.
SelectGroup
Used to group multiple items. use in conjunction with SelectLabel to ensure good accessibility via automatic labelling.
Classnames
Classnames available to customize the component.
| Function | Classname |
|---|---|
| SelectTrigger | selectTriggerClassname |
| SelectScrollUpButton | selectScrollUpButtonClassname |
| SelectScrollDownButton | selectScrollDownButtonClassname |
| SelectLabel | selectLabelClassname |
| SelectItem | selectItemClassname |
| SelectSeparator | selectSeparatorClassname |