Dioxus Componentsdioxus

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::switch::{self, SwitchProps};

#[component]
pub fn Switch(props: SwitchProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/switch/style.css") }
        switch::Switch {
            class: "dx-switch",
            checked: props.checked,
            default_checked: props.default_checked,
            disabled: props.disabled,
            required: props.required,
            name: props.name,
            value: props.value,
            on_checked_change: props.on_checked_change,
            attributes: props.attributes,
            switch::SwitchThumb { class: "dx-switch-thumb" }
        }
    }
}

Usage notes

The Switch component allows users to toggle between two states, such as on and off.

Component Structure

// The Switch component includes the switch thumb.
Switch {
    // The current state of the switch, true for on and false for off.
    checked: true,
    // Callback function triggered when the switch state changes.
    on_checked_change: |checked: bool| {
        // Handle the change in switch state.
    }
}