◇

Toggle

1 parts

A two-state button that can be pressed on or off, like a bold or italic control in a text editor toolbar. Renders a native <button> by default (handling Space/Enter and the disabled attribute for you), exposes aria-pressed, data-state (on/off), and data-disabled for styling, and works uncontrolled (defaultPressed) or controlled via v-model:pressed. When rendered as a non-button element it synthesizes keyboard activation and the appropriate tabindex/aria-disabled. Provide name to mirror the pressed state into a hidden checkbox so it participates in native form submission (suppressed automatically when nested in a ToggleGroup, which owns the submitted value). Use it for a single standalone toggle; for a set of mutually related toggles use ToggleGroup instead.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  Toggle,
} from '@robonen/primitives/forms/toggle';

<Toggle />

API Reference

Toggle

Root

A two-state button that can be pressed on or off, like a bold or italic control in a text editor toolbar. Renders a native `<button>` by default (handling Space/Enter and the `disabled` attribute for you), exposes `aria-pressed`, `data-state` (`on`/`off`), and `data-disabled` for styling, and works uncontrolled (`defaultPressed`) or controlled via `v-model:pressed`. When rendered as a non-button element it synthesizes keyboard activation and the appropriate `tabindex`/`aria-disabled`. Provide `name` to mirror the pressed state into a hidden checkbox so it participates in native form submission (suppressed automatically when nested in a `ToggleGroup`, which owns the submitted value). Use it for a single standalone toggle; for a set of mutually related toggles use `ToggleGroup` instead.

Prop	Type	Default	Description
`defaultPressed`?	`boolean`	—	Uncontrolled initial pressed state.
`disabled`?	`boolean`	—	Disables the toggle.
`name`?	`string`	—	Name for the hidden form input. When provided (and the toggle lives inside a `<form>` and is not nested in a `ToggleGroup`), a hidden checkbox mirrors the pressed state so it is submitted with the owning form.
`required`?	`boolean`	—	Marks the control as required for form submission (native validation).
`value`?	`string`	—	Value submitted by the hidden form input when pressed. Defaults to `'on'`.
`pressed`?	`boolean`	—	Two-way bound value (`v-model:pressed`).

Emits

Event	Payload
`update:pressed`	`[value: boolean]`