Switch

A toggle control that switches between checked and unchecked states.

Default

A basic switch in its unchecked state.

Checked

A switch rendered in its checked (on) state.

Sizes

Switch comes in two sizes: default and sm.

Small
Default

Disabled

Disabled switches cannot be interacted with.

Disabled (off)
Disabled (on)

With Label

Switches paired with labels for common settings patterns.

Airplane Mode

Disable all wireless connections

Wi-Fi

Connect to wireless networks

Bluetooth

Connect to Bluetooth devices

Accessibility

  • Uses role="switch" for proper semantics
  • aria-checked reflects the current state
  • Supports Enter and Space key to toggle
  • Disabled state prevents interaction
  • Use aria-label when the switch has no visible label
Open Markdown
FreeSwitch

Boolean toggle control.

Install with the Proa CLI
proa ui add switch

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Switch recipe — typed root sizing and a named thumb slot.
//!
//! The root resolves size once and publishes the thumb dimensions as CSS
//! variables. The thumb consumes those variables, keeping the root as the
//! single source of truth for the compound component's appearance.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

/// Size variants for the switch.
#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default, proa_macros::ProaVariant)]
#[variant(name = "size")]
pub enum SwitchSize {
    /// Small switch.
    Sm,
    /// Default switch size.
    #[default]
    Default,

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal