Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Switch

    An on or off setting that takes effect at once, with its label beside it.

    Storybook
    Storybook
    Source
    Source

    28 October 2026

    Section titled “28 October 2026”

    Added

    • First version: a labelled switch on Base UI Switch.
    • label, description, checked, defaultChecked, onCheckedChange, loading, loadingLabel, disabled, name.
    • The thumb slides with motion.switchThumb; the direction flips in right-to-left text.
    • The switch-width, switch-height and switch-thumb component tokens.

    Changed

    • The thumb gets a small shadow.
    • Focus shows as a 2 px outer focus outline with a 2 px gap (focus-outline).