Choicebox
A larger form of Radio or Checkbox, where the user has a larger tap target and more details.
Single-select
<script setup>
import { ref } from 'vue'
const modelValue = ref('trial')
</script>
<template>
<PChoicebox v-model="modelValue">
<PChoiceboxItem label="Pro trial" value="trial" description="Free for two weeks" />
<PChoiceboxItem label="Pro" value="pro" description="Get started now" />
</PChoicebox>
</template>
Multi-select
<script setup>
import { ref } from 'vue'
const modelValue = ref(['trial'])
const options = [
{
label: 'Pro trial',
value: 'trial',
description: 'Free for two weeks',
},
{
label: 'Pro',
value: 'pro',
description: 'Get started now',
},
]
</script>
<template>
<PChoicebox
v-model="modelValue"
:options="options"
multiple
/>
</template>
Disabled
<script setup>
import { ref } from 'vue'
const modelValue1 = ref('trial')
const modelValue2 = ref(['trial'])
const options = [
{
disabled: true,
label: 'Pro trial',
value: 'trial',
description: 'Free for two weeks',
},
{
disabled: true,
label: 'Pro',
value: 'pro',
description: 'Get started now',
},
]
</script>
<template>
<PStack direction="vertical" gap="6">
<PChoicebox
v-model="modelValue1"
>
<PChoiceboxItem v-for="item of options" :key="item.value" v-bind="item" />
</PChoicebox>
<PChoicebox
v-model="modelValue2"
:options="options"
multiple
/>
</PStack>
</template>
Custom content
Custom content is displayed when selecting the option.
<script setup>
import { ref } from 'vue'
const modelValue = ref('trial')
</script>
<template>
<PChoicebox v-model="modelValue">
<PChoiceboxItem label="Pro trial" value="trial" description="Free for two weeks">
<div className="flex justify-center p-2">
<PBadge variant="trial">Trial</PBadge>
</div>
</PChoiceboxItem>
<PChoiceboxItem label="Pro" value="pro" description="Get started now">
<div className="flex justify-center p-2">
<PBadge variant="blue">Pro</PBadge>
</div>
</PChoiceboxItem>
</PChoicebox>
</template>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| gap | number | Responsive | string | 3 | Spacing between items, forwarded to the inner PStack |
| label | string | number | null | - | Group label passed through context, the root keeps a fixed aria-label |
| multiple | boolean | - | Allow multiple selections and bind an array v-model |
| disabled | boolean | - | Disable every item in the group |
| options | { label, value, disabled? }[] | - | Items rendered when no default slot is given |
| model-value | string | number | boolean | (string | number | boolean)[] | - | Selected value, an array when multiple is set |
Events
| Name | Type | Description |
|---|---|---|
| change | (value: string | number | (string | number)[]) => void | Emitted when an item in the group is selected or deselected. |
| update:modelValue | (value: string | number | (string | number)[]) => void | Emitted right after change with the new selection. |
ChoiceboxItem Props
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | number | null | - | Text rendered as the item title |
| value | string | number | boolean | - | Value written to v-model when this item is selected |
| disabled | boolean | - | Disable this item, also implied by a disabled group |
| description | string | - | Secondary text rendered under the label |
ChoiceboxItem Slots
| Name | Description |
|---|---|
| default | Default slot |
| description | Description slot |
| label | label slot |