Checkbox

Base input element to toggle an option on and off.

use radix_yew_themes::{Checkbox, CheckedState, Flex, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn CheckboxExample() -> Html {
    html! {
        <Text r#as={TextAs::Label} size=2>
            <Flex gap=2>
                <Checkbox default_checked={CheckedState::True} />
                {"Agree to Terms and Conditions"}
            </Flex>
        </Text>
    }
}

API Reference

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

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

Examples

Size

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

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

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

Variant

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

use radix_yew_themes::{Checkbox, CheckboxVariant, CheckedState, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn CheckboxVariantExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Flex gap=2>
                <Checkbox variant={CheckboxVariant::Surface} default_checked={CheckedState::True} />
                <Checkbox variant={CheckboxVariant::Surface} />
            </Flex>

            <Flex gap=2>
                <Checkbox variant={CheckboxVariant::Classic} default_checked={CheckedState::True} />
                <Checkbox variant={CheckboxVariant::Classic} />
            </Flex>

            <Flex gap=2>
                <Checkbox variant={CheckboxVariant::Soft} default_checked={CheckedState::True} />
                <Checkbox variant={CheckboxVariant::Soft} />
            </Flex>
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

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

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

High-Contrast

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

use radix_yew_themes::{AccentColor, Checkbox, CheckedState, Grid, GridDisplay};
use yew::prelude::*;

#[function_component]
pub fn CheckboxHighContrastExample() -> Html {
    html! {
        <Grid columns=5 display={GridDisplay::InlineGrid} gap=2>
            <Checkbox color={AccentColor::Indigo} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Cyan} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Orange} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Crimson} default_checked={CheckedState::True} />
            <Checkbox color={AccentColor::Gray} default_checked={CheckedState::True} />

            <Checkbox color={AccentColor::Indigo} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Cyan} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Orange} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Crimson} default_checked={CheckedState::True} high_contrast=true />
            <Checkbox color={AccentColor::Gray} default_checked={CheckedState::True} high_contrast=true />
        </Grid>
    }
}

Alignment

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

use radix_yew_themes::{Checkbox, CheckedState, Flex, FlexAs, FlexDirection, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn CheckboxAlignmentExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3>
            <Text r#as={TextAs::Label} size=2>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox size=1 default_checked={CheckedState::True} />{" Agree to Terms and Conditions"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=3>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox size=2 default_checked={CheckedState::True} />{" Agree to Terms and Conditions"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=4>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox size=3 default_checked={CheckedState::True} />{" Agree to Terms and Conditions"}
                </Flex>
            </Text>
        </Flex>
    }
}

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

use radix_yew_themes::{Box, Checkbox, CheckedState, Flex, FlexAs, Text, TextAs};
use yew::prelude::*;

#[function_component]
pub fn CheckboxAlignmentMultiLineExample() -> Html {
    html! {
        <Box max_width="300px">
            <Text r#as={TextAs::Label} size=3>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox default_checked={CheckedState::True} />{" I understand that these documents are
                    confidential and cannot be shared with a third party."}
                </Flex>
            </Text>
        </Box>
    }
}

Disabled

Use the native disabled attribute to create a disabled checkbox.

use radix_yew_themes::{
    AccentColor, Checkbox, CheckedState, Flex, FlexAs, FlexDirection, Text, TextAs,
};
use yew::prelude::*;

#[function_component]
pub fn CheckboxDisabledExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2>
            <Text r#as={TextAs::Label} size=2>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox />
                    {"Not checked"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox default_checked={CheckedState::True} />
                    {"Checked"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox disabled=true />
                    {"Not checked"}
                </Flex>
            </Text>

            <Text r#as={TextAs::Label} size=2 color={AccentColor::Gray}>
                <Flex r#as={FlexAs::Span} gap=2>
                    <Checkbox disabled=true default_checked={CheckedState::True} />
                    {"Checked"}
                </Flex>
            </Text>
        </Flex>
    }
}

Indeterminate

Use the CheckedState::Indeterminate value to create an indeterminate checkbox.

use radix_yew_themes::{Checkbox, CheckedState, Flex};
use yew::prelude::*;

#[function_component]
pub fn CheckboxIndeterminateExample() -> Html {
    html! {
        <Flex gap=2>
            <Checkbox default_checked={CheckedState::Indeterminate} />
            <Checkbox checked={CheckedState::Indeterminate} />
        </Flex>
    }
}

Rust Radix