Kaiko UI Kaiko UI

Toggle Group

New

A group of mutually-exclusive toggle buttons implemented as CSS-only radio inputs styled with DaisyUI's join and btn patterns. No JavaScript required.

API Reference

c-toggle-group (container)

Attribute Description Type Default
vertical Stacks items vertically instead of horizontally boolean False

c-toggle-group.item

The name prop must match across all items in the same group — this links them into a radio group for CSS-only selection. A unique id is auto-generated for each item via the {% new_id %} template tag.

Attribute Description Type Default
name Radio group name — must be shared by all items in the group string ""
value Value submitted with the radio input string ""
label Visible button text. Used when the slot is empty. string ""
checked Pre-selects this item on render boolean False
disabled Disables the radio input and applies muted button styling boolean False
size Button size string "md"
color DaisyUI color token applied to the button string ""
variant Button style variant string ""

color

primary secondary accent neutral

size

xs sm md lg xl

variant

outline soft ghost

Accessibility

Radio semantics: each item is a hidden <input type="radio"> paired with a <label>. The browser enforces single-selection and keyboard navigation (arrow keys) without JavaScript.

Icon-only items: when using slot content (e.g. icons) without visible text, also set the label prop — it provides an accessible name for screen readers via the underlying radio input's label relationship.

Disabled state: disabled items receive the native disabled attribute on the input, which removes them from keyboard focus and announces them as unavailable to screen readers.

Examples

Usage 


<c-toggle-group>
  <c-toggle-group.item name="alignment" value="left" label="Left" checked="True" />
  <c-toggle-group.item name="alignment" value="center" label="Center" />
  <c-toggle-group.item name="alignment" value="right" label="Right" />
</c-toggle-group>

Text Options 

<c-toggle-group>
  <c-toggle-group.item name="alignment" value="left" label="Left" checked="True" />
  <c-toggle-group.item name="alignment" value="center" label="Center" />
  <c-toggle-group.item name="alignment" value="right" label="Right" />
</c-toggle-group>

Icon Options 

<c-toggle-group>
  <c-toggle-group.item name="alignment_icons" value="left" checked="True">
    <c-icon name="align-left" />
  </c-toggle-group.item>
  <c-toggle-group.item name="alignment_icons" value="center">
    <c-icon name="align-center" />
  </c-toggle-group.item>
  <c-toggle-group.item name="alignment_icons" value="right">
    <c-icon name="align-right" />
  </c-toggle-group.item>
</c-toggle-group>

Colors

primary

secondary

accent

neutral 

<c-toggle-group>
  <c-toggle-group.item name="opts" value="a" label="Option A" color="primary" checked="True" />
  <c-toggle-group.item name="opts" value="b" label="Option B" color="primary" />
  <c-toggle-group.item name="opts" value="c" label="Option C" color="primary" />
</c-toggle-group>

Sizes

xs

sm

md

lg 

<c-toggle-group>
  <c-toggle-group.item name="opts" value="a" label="A" size="xs" checked="True" />
  <c-toggle-group.item name="opts" value="b" label="B" size="xs" />
</c-toggle-group>

<c-toggle-group>
  <c-toggle-group.item name="opts2" value="a" label="A" size="lg" checked="True" />
  <c-toggle-group.item name="opts2" value="b" label="B" size="lg" />
</c-toggle-group>

Style Variants

outline + primary

soft + secondary

ghost 

<!-- Outline -->
<c-toggle-group>
  <c-toggle-group.item name="opts" value="a" label="Option A" variant="outline" color="primary" checked="True" />
  <c-toggle-group.item name="opts" value="b" label="Option B" variant="outline" color="primary" />
</c-toggle-group>

<!-- Soft -->
<c-toggle-group>
  <c-toggle-group.item name="opts2" value="a" label="Option A" variant="soft" color="secondary" checked="True" />
  <c-toggle-group.item name="opts2" value="b" label="Option B" variant="soft" color="secondary" />
</c-toggle-group>

Vertical Layout 

<c-toggle-group vertical="True">
  <c-toggle-group.item name="view_mode" value="list" label="List View" checked="True" />
  <c-toggle-group.item name="view_mode" value="grid" label="Grid View" />
  <c-toggle-group.item name="view_mode" value="compact" label="Compact View" />
</c-toggle-group>

Disabled Items 

<c-toggle-group>
  <c-toggle-group.item name="plan" value="free" label="Free" checked="True" />
  <c-toggle-group.item name="plan" value="pro" label="Pro" />
  <c-toggle-group.item name="plan" value="enterprise" label="Enterprise" disabled="True" />
</c-toggle-group>