Selectboxes

Selectboxes display options in a card/button-like layout, supporting single-selection (Radio) and multi-selection (Checkbox) modes.

Basic Usage (Single)

Use v-model for two-way binding. Only one option can be selected at a time by default.

Show Code

<TSelectboxes v-model="selected">
  <TSelectboxItem value="apple" label="Apple" />
  <TSelectboxItem value="banana" label="Banana" />
  <TSelectboxItem value="orange" label="Orange" />
</TSelectboxes>

Multi-selection

Set multiple to enable checkbox mode. The bound value becomes an array.

Show Code

<TSelectboxes v-model="selectedMulti" multiple>
  <TSelectboxItem value="vue" label="Vue" />
  <TSelectboxItem value="react" label="React" />
  <TSelectboxItem value="svelte" label="Svelte" />
  <TSelectboxItem value="angular" label="Angular" />
</TSelectboxes>

Pill Style

Set the pill prop for a more compact, rounded appearance.

Show Code

<TSelectboxes v-model="selectedTag" pill>
  <TSelectboxItem value="design" label="Design" />
  <TSelectboxItem value="frontend" label="Frontend" />
  <TSelectboxItem value="backend" label="Backend" />
  <TSelectboxItem value="devops" label="DevOps" />
</TSelectboxes>

Custom Content (Slot)

Use the default slot on TSelectboxItem to customize each option with icons or rich content.

Show Code

<TSelectboxes v-model="selectedPlatform">
  <TSelectboxItem value="ios">
    <span class="d-inline-flex align-items-center gap-2">
      <IconBrandApple :size="16" />
      <span>iOS</span>
    </span>
  </TSelectboxItem>
  <!-- ... -->
</TSelectboxes>

Options Array

Pass an array of strings or objects via the options prop to auto-generate TSelectboxItem children.

Show Code

<TSelectboxes v-model="selectedOptions" :options="[
  { label: 'Alipay', value: 'alipay' },
  { label: 'WeChat Pay', value: 'wechat' },
  { label: 'UnionPay', value: 'unionpay', disabled: true },
]" />

API

TSelectboxes Props

Prop	Description	Type	Default
v-model	Selected value (single: any, multi: array)	any | any[]	undefined
multiple	Multi-selection (Checkbox) mode	boolean	false
pill	Pill/capsule style	boolean	false
disabled	Disable all options	boolean	false
name	Native name attribute	string	undefined
options	Options array (strings or objects); auto-generates TSelectboxItem	(string | { label: string, value?: any, disabled?: boolean })[]	undefined

TSelectboxes Emits

Event	Description	Parameters
update:modelValue	Emitted when v-model changes	(value: any | any[]) => void
change	Emitted when selection changes	(value: any | any[]) => void

TSelectboxItem Props

Prop	Description	Type	Default
value	Option value	any	—
label	Label text	string	undefined
disabled	Disable this item	boolean	false

TSelectboxes Slots

Slot	Description	Scoped Props
default	Custom children (when options is not set)	—
option	Custom option label (when options is set)	{ option: { label, value, disabled }, checked: boolean }

TSelectboxItem Slots

Slot	Description
default	Custom option content (overrides label prop)