Select
Displays a list of options for the user to pick from—triggered by a button.
Usage
import {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
} from "@momo-webplatform/mobase";<Select label="Thành phố" message="Help message">
<SelectTrigger className="w-[250px]">
<SelectValue placeholder="Select a value" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Thành phố</SelectLabel>
<SelectItem value="Hồ Chí Minh">Hồ Chí Minh</SelectItem>
<SelectItem value="Nha Trang">Nha Trang</SelectItem>
<SelectItem value="Đà Lạt">Đà Lạt</SelectItem>
<SelectItem value="Vũng Tàu">Vũng Tàu</SelectItem>
<SelectItem value="Huế">Huế</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Tennis player</SelectLabel>
<SelectItem value="Roger Federer" disabled>Roger Federer</SelectItem>
<SelectItem value="Rafael Nadal">Rafael Nadal</SelectItem>
<SelectItem value="Novak Djokovic">Novak Djokovic</SelectItem>
<SelectItem value="Andy Murray" disabled>Andy Murray</SelectItem>
</SelectGroup>
<SelectGroup>
<SelectLabel>Waifu</SelectLabel>
<SelectItem value="Ganyu">Ganyu</SelectItem>
<SelectItem value="Kamisato Ayaka">Kamisato Ayaka</SelectItem>
<SelectItem value="Jean">Jean</SelectItem>
<SelectItem value="Nilou">Nilou</SelectItem>
</SelectGroup>
</SelectContent>
</Select>Examples
Status
- Focused: The select has been navigated to and is ready to accept input.
- Error: The value failed validation.
- Disabled: The select cannot accept select or become focused.
Size
Select has 2 different sizes:
API Reference
Select component extends Radix Select (opens in a new tab) component and supports all of its props.
Select
| Prop | Type | Default | Required |
value | string | -- | false |
defaultValue | string | -- | false |
onValueChange | (value: string) => void | -- | false |
open | enumboolean | -- | false |
defaultOpen | enumboolean | -- | false |
onOpenChange | (open: boolean) => void | -- | false |
dir | enumDirection | -- | false |
name | string | -- | false |
autoComplete | string | -- | false |
disabled | enumboolean | -- | false |
required | enumboolean | -- | false |
className | string | -- | false |
label | string | -- | false |
message | string | -- | false |
size | enum1 | 2 | -- | false |
isError | enumboolean | -- | false |
SelectGroup
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
SelectValue
| Prop | Type | Default | Required |
placeholder | enumReactNode | -- | false |
asChild | enumboolean | -- | false |
SelectTrigger
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
SelectContent
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
side | enumtop | right | bottom | left | -- | false |
sideOffset | number | -- | false |
align | enumcenter | start | end | -- | false |
alignOffset | number | -- | false |
arrowPadding | number | -- | false |
avoidCollisions | enumboolean | -- | false |
collisionBoundary | enumElement | Element[] | -- | false |
collisionPadding | enumnumber | Partial<Record<top | right | bottom | left, number>> | -- | false |
sticky | enumpartial | always | -- | false |
hideWhenDetached | enumboolean | -- | false |
updatePositionStrategy | enumalways | optimized | -- | false |
onCloseAutoFocus | (event: Event) => void | -- | false |
onEscapeKeyDown | (event: KeyboardEvent) => void | -- | false |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | -- | false |
position | enumitem-aligned | popper | popper | false |
SelectLabel
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
SelectItem
| Prop | Type | Default | Required |
value | string | -- | true |
disabled | enumboolean | -- | false |
asChild | enumboolean | -- | false |
textValue | string | -- | false |
SelectSeparator
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
SelectScrollUpButton
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
SelectScrollDownButton
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
Best practices
-
Use a select input for longer lists of options. If there are 6 or fewer options and you don't need to conserve vertical space, consider using a Radio component (opens in a new tab) instead.
-
Provide a default selected option when possible
-
Order the menu options in a logical order to make it easier for users to find the option they're looking for. Default to alphabetical order.