Components

Lightswitch

Lightswitches communicate immediate on or off state for binary settings.

Basic Usage

Use a lightswitch for binary settings where the current state should be immediately visible.

Sizes

The reduced size scale is useful when lightswitches appear in dense settings rows or supporting metadata panels.

Checked

Use checked state for persisted settings so the current toggle value is immediately visible.

Disabled

Disable the toggle when the setting is shown for context but cannot currently be changed.

Labels

Pair switches with clear labels when the setting needs more context than the control alone can provide.

API reference

Lightswitch wraps Base UI Switch. Use the Base UI API reference for checked state, disabled behavior, form integration, and switch accessibility details.

Edit this page
Last updated: May 22, 2026, 6:53 PM