2.0 KiB
github, description
| github | description |
|---|---|
| true | Display a select field. |
Usage
The Select component is a wrapper around the native <select> HTML element. For more advanced use cases like searching or multiple selection, consider using the SelectMenu component.
::component-card
baseProps: name: 'select' modelValue: 'United States' props: options: - 'United States' - 'Canada' - 'Mexico' excludedProps:
- options
::
Size
Use the size prop to change the size of the Input.
::component-card
baseProps: name: 'select' options: - 'United States' - 'Canada' - 'Mexico' props: size: 'sm'
::
Placeholder
Use the placeholder prop to set a placeholder text.
::component-card
baseProps: name: 'select' options: - 'United States' - 'Canada' - 'Mexico' props: placeholder: 'Search...'
::
Appearance
Use the appearance prop to change the style of the Select.
::component-card
baseProps: name: 'select' options: - 'United States' - 'Canada' - 'Mexico' placeholder: 'Search...' props: appearance: 'white'
::
Icon
Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.
Use the trailingIcon prop to set a different icon or change it globally in ui.select.default.trailingIcon. Defaults to i-heroicons-chevron-down-20-solid.
::component-card
baseProps: name: 'select' options: - 'United States' - 'Canada' - 'Mexico' placeholder: 'Search...' props: icon: 'i-heroicons-magnifying-glass-20-solid' appearance: 'white' size: 'sm' excludedProps:
- icon
::
Disabled
Use the disabled prop to disable the Input.
::component-card
baseProps: name: 'select' options: - 'United States' - 'Canada' - 'Mexico' placeholder: 'Search...' props: appearance: 'white' disabled: true
::
Props
:component-props
Preset
:component-preset