Toggle

The Toggle component is a button-like control that can be switched between pressed and unpressed states. It is useful for options that can be activated or deactivated, and can be used individually or as part of a group (using ToggleGroup).

Features

• Supports single and multiple selection (with ToggleGroup)
• Customizable size and variant
• Optional icons and labels
• Accessible with ARIA attributes
• Keyboard and mouse operable

Basic Usage

Bold

<script>
  import Toggle from '$lib/components/Toggle/Toggle.svelte';
</script>

<Toggle label="Bold" />

Toggle Group

Use ToggleGroup to manage a set of toggles, supporting single or multiple selection.

<script>
  import { Toggle, ToggleGroup } from 'rebel-ui';
</script>

<ToggleGroup type="single" value="left">
  <Toggle label="Left" value="left" />
  <Toggle label="Center" value="center" />
  <Toggle label="Right" value="right" />
</ToggleGroup>

Props

Toggle

Prop	Type	Default	Description
label	string	''	The label text for the toggle.
value	string	''	Value for use in a group.
pressed	boolean	false	Whether the toggle is pressed.
disabled	boolean	false	Disables the toggle.
size	'sm' \| 'md' \| 'lg'	'md'	Size of the toggle.
variant	'default' \| 'soft' \| 'outline'	'default'	Visual style variant.
ariaLabel	string	''	ARIA label for accessibility.
icon	() => string	undefined	Optional icon (HTML string or Svelte fn).

ToggleGroup

Prop	Type	Default	Description
value	string \| string[] \| undefined	undefined	Selected value(s).
type	'single' \| 'multiple'	'single'	Selection mode.
disabled	boolean	false	Disables all toggles in the group.
size	'sm' \| 'md' \| 'lg'	'md'	Size of toggles.
variant	'default' \| 'soft' \| 'outline'	'default'	Visual style variant.

Accessibility

• Each toggle uses aria-pressed to indicate state.
• Use ariaLabel for icon-only toggles.
• Groups use role="radiogroup" (single) or role="group" (multiple).
• Fully keyboard accessible.

Example: Icon Toggle

<script>
  import Toggle from '$lib/components/Toggle/Toggle.svelte';
  const boldIcon = () => `<svg width="16" height="16" ...>...</svg>`;
</script>

<Toggle icon={boldIcon} ariaLabel="Bold" />

Example: Multiple Selection

<ToggleGroup type="multiple" value={["bold", "italic"]}>
  <Toggle label="Bold" value="bold" />
  <Toggle label="Italic" value="italic" />
  <Toggle label="Underline" value="underline" />
</ToggleGroup>

Styling

The toggle and group components can be styled using the provided CSS classes and variants. See the source for more details.