Selection

Menus that can be used in single or multiple selection form

Examples

Radio mode

Radio button groups allow the user to select an option from a mutually exclusive list of options

Response data for item switching events

Event data logs

template

<SelectMenuBody>
  <SelectMenuHeader>Radio group</SelectMenuHeader>
  <SelectMenuRadioGroup>
    <SelectMenuRadioItem
      value="radio1"
      disabled
    >radio1</SelectMenuRadioItem>
    <SelectMenuRadioItem value="radio2">radio2</SelectMenuRadioItem>
    <SelectMenuRadioItem value="radio3">radio3</SelectMenuRadioItem>
  </SelectMenuRadioGroup>
</SelectMenuBody>

ts

import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuHeader,
  SelectMenuRadioGroup,
  SelectMenuRadioItem
} from 'v-selectmenu'

Checkbox mode

CheckboxGroup allows the user to select one or more items from a list of options

Response data for item switching events

Event data logs

template

<SelectMenuBody>
  <SelectMenuHeader>Checkbox group</SelectMenuHeader>
  <SelectMenuCheckboxGroup>
    <SelectMenuCheckboxItem
      value="checkbox1"
    >checkbox1</SelectMenuCheckboxItem>
    <SelectMenuCheckboxItem
      value="checkbox2"
      disabled
    >checkbox2</SelectMenuCheckboxItem>
    <SelectMenuCheckboxItem
      value="checkbox3"
    >checkbox3</SelectMenuCheckboxItem>
  </SelectMenuCheckboxGroup>
</SelectMenuBody>

ts

import {
  SelectMenuDropdown,
  SelectMenuTrigger,
  SelectMenuBody,
  SelectMenuHeader,
  SelectMenuCheckboxGroup,
  SelectMenuCheckboxItem
} from 'v-selectmenu'

Default selection

Sets the specified items to be checked by default

template

<!-- radio group with default value -->
<SelectMenuRadioGroup v-model="radioGroupActive">
...
</SelectMenuRadioGroup>

<!-- checkbox group with default value -->
<SelectMenuCheckboxGroup v-model="checkboxGroupActive">
...
</SelectMenuCheckboxGroup>

ts

import { ref } from 'vue'

const radioGroupActive = ref('radio2')
const checkboxGroupActive = ref(['checkbox1', 'checkbox3'])

Radio group

Checkbox group

Clear selection

Clear selected items

// clear radio group selection
radioGroupActive.value = ''
// clear checkbox group selection
checkboxGroupActive.value = []

Close menu after selection

Close the menu after item selection

template

<SelectMenuRadioGroup :hideOnSelection="hideOnSelection">
...
</SelectMenuRadioGroup>

<SelectMenuCheckboxGroup :hideOnSelection="hideOnSelection">
...
</SelectMenuCheckboxGroup>

ts

import { ref } from 'vue'

const hideOnSelection = ref(false)

Close menu on selection

Radio group

Checkbox group

Props

Group props

SelectMenuRadioGroup, SelectMenuCheckboxGroup props

type SelectionValue = string | number

interface RadioGroupProps {
  modelValue?: SelectionValue
  /**
   * @default true
   */
  hideOnSelection?: boolean
}

interface CheckboxGroupProps {
  modelValue?: SelectionValue[]
  /**
   * @default false
   */
  hideOnSelection?: boolean
}

Item props

SelectMenuRadioItem, SelectMenuCheckboxItem props

interface SelectionItemProps {
  value: SelectionValue
  /**
   * @default false
   */
  disabled?: boolean
}

Events

SelectMenuRadioGroup, SelectMenuCheckboxGroup response events

update:modelValue

Responding to selection changes

// radio group
`update:modelValue`: (value: SelectionValue) => void

// checkbox group
`update:modelValue`: (value: SelectionValue[]) => void

change

Responding to selection changes

// radio group
change: (data: SelectionValue) => void

// checkbox group
change: (data: SelectionValue[]) => void

Slots

Group slots

SelectMenuRadioGroup, SelectMenuCheckboxGroup slots

• default default slot

Item slots

SelectMenuRadioItem, SelectMenuCheckboxItem slots

• prepend prepend slot
• default default slot
• append tail slot, aligned right