Skip to content

Select

Displays a list of options for the user to pick from.

components

UiSelect

The select component root.

Example

view-command.tsx
import { UiSelect } from '@altdot/extension';
export default function Command() {
return (
<UiSelect>
{/* ... */}
</UiSelect>
)
}

Props

NameTypeDescription
placeholder?stringThe content that will be rendered when no option is selected
triggerLeft?React.ReactNodeThe content that will be rendered on the left side
variant?('default')The select’s variant
inputSize?('sm' | 'lg' | 'default')The select’s size. Default is default
position?('item-aligned' | 'popper')The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item. popper positions content in the same way as the <select> element.

UiSelect.Option

The component that contains the select option.

Example

view-command.tsx
import { UiSelect } from '@altdot/extension';
export default function Command() {
return (
<UiSelect>
<UiSelect.Option value="option-1">Option 1</UiSelect.Option>
<UiSelect.Option value="option-2">Option 2</UiSelect.Option>
</UiSelect>
)
}

Props

NameTypeDescription
valuestringThe option’s value
disabled?booleanPrevents the user from interacting with the item when it’s true

UiSelect.Group

Used to group multiple options.

Example

view-command.tsx
import { UiSelect } from '@altdot/extension';
export default function Command() {
return (
<UiSelect>
<UiSelect.Group>
<UiSelect.Label>Label</UiSelect.Label>
<UiSelect.Option>...</UiSelect.Option>
<UiSelect.Option>...</UiSelect.Option>
</UiSelect.Group>
</UiSelect>
)
}

UiSelect.Label

Used to render the label of a group.

UiSelect.Separator

Used to visually separate items in the select.

Example

view-command.tsx
import { UiSelect } from '@altdot/extension';
export default function Command() {
return (
<UiSelect>
<UiSelect.Option>...</UiSelect.Option>
<UiSelect.Option>...</UiSelect.Option>
<UiSelect.Separator />
<UiSelect.Option>...</UiSelect.Option>
</UiSelect>
)
}