Switch

Toggle switch alternative to the checkbox.

use radix_yew_themes::Switch;
use yew::prelude::*;

#[function_component]
pub fn SwitchExample() -> Html {
    html! {
        <Switch default_checked=true />
    }
}

API Reference

This component inherits props from the Switch primitive and supports common margin props.

Prop	Type	Default
`size`	`Responsive<1..3>`	`2`
`variant`	`SwitchVariant`	`SwitchVariant::Surface`
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-
`radius`	`Option<Radius>`	-

Examples

Size

Use the size prop to control the size of the switch.

use radix_yew_themes::{Flex, FlexAlign, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=2>
            <Switch size=1 default_checked=true />
            <Switch size=2 default_checked=true />
            <Switch size=3 default_checked=true />
        </Flex>
    }
}

Variant

Use the variant prop to control the visual style of the switch.

use radix_yew_themes::{Flex, FlexDirection, Switch, SwitchVariant};
use yew::prelude::*;

#[function_component]
pub fn SwitchVariantExample() -> Html {
    html! {
        <Flex gap=2>
            <Flex direction={FlexDirection::Column} gap=3>
                <Switch variant={SwitchVariant::Surface} />
                <Switch variant={SwitchVariant::Classic} />
                <Switch variant={SwitchVariant::Soft} />
            </Flex>

            <Flex direction={FlexDirection::Column} gap=3>
                <Switch variant={SwitchVariant::Surface} default_checked=true />
                <Switch variant={SwitchVariant::Classic} default_checked=true />
                <Switch variant={SwitchVariant::Soft} default_checked=true />
            </Flex>
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_themes::{AccentColor, Flex, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchColorExample() -> Html {
    html! {
        <Flex gap=2>
            <Switch color={AccentColor::Indigo} default_checked=true />
            <Switch color={AccentColor::Cyan} default_checked=true />
            <Switch color={AccentColor::Orange} default_checked=true />
            <Switch color={AccentColor::Crimson} default_checked=true />
        </Flex>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast in light mode.

use radix_yew_themes::{AccentColor, Grid, GridDisplay, GridFlow, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchHighContrastExample() -> Html {
    html! {
        <Grid rows=2 gap_x=2 gap_y=3 display={GridDisplay::InlineGrid} flow={GridFlow::Column}>
            <Switch color={AccentColor::Indigo} default_checked=true />
            <Switch color={AccentColor::Indigo} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Cyan} default_checked=true />
            <Switch color={AccentColor::Cyan} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Orange} default_checked=true />
            <Switch color={AccentColor::Orange} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Crimson} default_checked=true />
            <Switch color={AccentColor::Crimson} default_checked=true high_contrast=true />
            <Switch color={AccentColor::Gray} default_checked=true />
            <Switch color={AccentColor::Gray} default_checked=true high_contrast=true />
        </Grid>
    }
}

Radius

Use the radius prop to assign a specific radius value.

use radix_yew_themes::{Flex, Radius, Switch};
use yew::prelude::*;

#[function_component]
pub fn SwitchRadiusExample() -> Html {
    html! {
        <Flex gap=3>
            <Switch radius={Radius::None} default_checked=true />
            <Switch radius={Radius::Small} default_checked=true />
            <Switch radius={Radius::Medium} default_checked=true />
            <Switch radius={Radius::Large} default_checked=true />
            <Switch radius={Radius::Full} default_checked=true />
        </Flex>
    }
}

Alignment

Composing Switch within Text automatically centers it with the first line of text.

use radix_yew_themes::{Flex, FlexDirection, Switch, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn SwitchAlignmentExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text r#as={TextAs::Label} size=2>
                <Flex gap=2>
                    <Switch size=1 default_checked=true />{" Sync settings"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=3>
                <Flex gap=2>
                    <Switch size=2 default_checked=true />{" Sync settings"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=4>
                <Flex gap=2>
                    <Switch size=3 default_checked=true />{" Sync settings"}
                </Flex>
            </Text>
        </Flex>
    }
}

It is automatically well-aligned with multi-line text too.

Disabled

Use the native disabled attribute to create a disabled switch.

use radix_yew_themes::{AccentColor, Flex, FlexDirection, Switch, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn SwitchDisabledExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2>
            <Text r#as={TextAs::Label} size=2>
                <Flex gap=2>
                    <Switch size=1 />
                    {"Off"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2>
                <Flex gap=2>
                    <Switch size=1 default_checked=true />
                    {"On"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex gap=2>
                    <Switch size=1 disabled=true />
                    {"On"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex gap=2>
                    <Switch size=1 disabled=true default_checked=true />
                    {"Off"}
                </Flex>
            </Text>
        </Flex>
    }
}

Rust Radix