Select - Nuxt UI

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.

Use a v-model to make the Select reactive alongside the options prop to pass an array of strings or objects.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

When using objects, you can configure which field will be used for display through the option-attribute prop that defaults to label and which field will be used for comparison through the value-attribute prop that defaults to value.

Adding a disabled key to the objects will control the disabled state of the option.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

Use the color and variant props to change the visual style of the Select.

color

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Besides all the colors from the ui.colors object, you can also use the white (default) and gray colors with their pre-defined variants.

White

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Gray

variant

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the Select.

size

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Placeholder

Use the placeholder prop to set a placeholder text.

placeholder

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

Use the trailing-icon prop to set a different icon or change it globally in ui.select.default.trailingIcon. Defaults to i-heroicons-chevron-down-20-solid.

color

size

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disabled

Use the disabled prop to disable the Select.

disabled

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Add a disabled key with a truthy value to the options array of object to disable a single option.

Loading

Use the loading prop to show a loading icon and disable the Input.

Use the loading-icon prop to set a different icon or change it globally in ui.select.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Padded

Use the padded prop to remove the padding of the Select.

padded

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

`leading`

Use the #leading slot to set the content of the leading icon.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

`trailing`

Use the #trailing slot to set the content of the trailing icon.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

name

string

null

size

SelectSize

null

"md""2xs""xs""sm""lg""xl"

color

SelectColor

config.default.color

"primary""white""gray""red""orange""amber""yellow""lime""green""emerald""teal""cyan""sky""blue""indigo""violet""purple""fuchsia""pink""rose"

icon

string

null

{ form?: string; placeholder?: string; default?: DeepPartial<{ size: string; color: string; variant: string; loadingIcon: string; trailingIcon: string; }, any>; wrapper?: string; base?: string; rounded?: string; file?: DeepPartial<{ base: string; }, any>; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; gap?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; padding?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; leading?: DeepPartial<{ padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }, any>; trailing?: DeepPartial<{ padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }, any>; color?: DeepPartial<{ white: { outline: string; }; gray: { outline: string; }; }, any>; variant?: DeepPartial<{ outline: string; none: string; }, any>; icon?: DeepPartial<{ base: string; color: string; loading: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; leading: { wrapper: string; pointer: string; padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }; trailing: { wrapper: string; pointer: string; padding: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }; }; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

string

null

modelValue

string | number | object

""

variant

SelectVariant

config.default.variant

"outline""none"

placeholder

string

null

loadingIcon

string

config.default.loadingIcon

leadingIcon

string

null

trailingIcon

string

config.default.trailingIcon

options

unknown[]

[]

optionAttribute

string

"label"

valueAttribute

string

"value"

selectClass

string

null

onChange

(...args: any[]) => any

onUpdate:modelValue

(...args: any[]) => any

required

boolean

false

disabled

boolean

false

leading

boolean

false

trailing

boolean

false

boolean

false

padded

boolean

true

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Range

Display a range field

SelectMenu

Display a select menu with advanced features.