Forms v1.0.0

Toggle Group

A row of toggle buttons for switching between views, filters, or modes. Supports single-select (radio-like) and multi-select (checkbox-like) modes with full keyboard navigation using arrow keys.

Outline

Bordered buttons in a row with active state fill. Clean and professional.

Options

Name Type Default Description
items * Array required Array of hashes with :label (String), :value (String), optional :icon (String SVG)
mode Symbol :single Selection mode: :single or :multiple
size Symbol :md Size: :sm, :md, :lg
value String Initially selected value (single mode) or comma-separated values (multiple mode)
name String Form field name for hidden input
disabled Boolean false Disable all buttons

Pill

Rounded pill buttons with subtle background on active. Softer aesthetic.

Options

Name Type Default Description
items * Array required Array of hashes with :label, :value, optional :icon
mode Symbol :single Selection mode: :single or :multiple
size Symbol :md Size: :sm, :md, :lg
value String Initially selected value(s)
name String Form field name
disabled Boolean false Disable all buttons

Changelog v1.0.0

- v1.0.0: Initial release with outline and pill styles

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now