Checkbox

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component that displays a control that allows the user to toggle between checked and not checked.

utils
  • Rust UI Icons - CopyCopy Demo

Checkboxes use relative units and will scale to your font size. By default the checkbox size is set to 1.25em.

use leptos::prelude::*;

use crate::components::ui::checkbox::Checkbox;

#[component]
pub fn DemoCheckbox() -> impl IntoView {
    view! {
        <style>
            {".md__checkbox.md-checkbox-inline {
            display: inline-block;
            }
            
            .md__checkbox label:not(:empty) {
            padding-left: 0.75em;
            }
            
            .md__checkbox input[type=\"checkbox\"]:disabled + label:before {
            border-color: rgba(0, 0, 0, 0.26);
            }
            
            .md__checkbox input[type=\"checkbox\"]:disabled:checked + label:before {
            background: rgba(0, 0, 0, 0.26);
            }"}
        </style>

        <div>
            <Checkbox label="Item 1" checked=true />
            <Checkbox label="Item 2" />
            <Checkbox label="Disabled" disabled="disabled" checked=true />
            <Checkbox label="Disabled" disabled="disabled" />

            <p>
                "Checkboxes use relative units and will scale to
                your font size. By default the checkbox size is 
                set to 1.25em."
            </p>
            <Checkbox label="Scales with font size" />
        </div>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_checkbox
ui add checkbox

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/checkbox.rs

use leptos::prelude::*;

use crate::components::hooks::use_random::use_random_id;

#[component]
pub fn Checkbox(
    #[prop(into, optional)] disabled: Option<&'static str>,
    #[prop(default = false)] checked: bool,
    #[prop(into)] label: &'static str,
) -> impl IntoView {
    const INPUT_CLASS: &str = "outline-none invisible w-[1.25em] m-0 block float-left text-inherit peer";

    const LABEL_CLASS: &str = "inline leading-tight cursor-pointer align-top clear-both pl-[1px] after:content-[''] after:absolute after:left-0 after:top-0
                    before:content-[''] before:absolute before:left-0 before:top-0 before:w-[1.25em] before:h-[1.25em] before:bg-white 
                    before:border-2 before:border-black/54 before:rounded-[0.125em] 
                    before:cursor-pointer before:transition-colors before:duration-300. peer-checked:before:bg-sky-600 peer-checked:before:border-none   peer-checked:after:translate-x-[0.25em] peer-checked:after:translate-y-[0.3365384615em] 
                    peer-checked:after:-rotate-45 peer-checked:after:w-[0.75em] peer-checked:after:h-[0.375em] 
                    peer-checked:after:border-[0.125em] peer-checked:after:border-white 
                    peer-checked:after:border-t-0 peer-checked:after:border-r-0";

    let random_id = use_random_id();

    view! {
        <div class="relative my-4 text-left md__checkbox">
            <input id=&random_id type="checkbox" class=INPUT_CLASS checked=checked disabled=disabled />
            <label class=LABEL_CLASS for=&random_id>
                {label}
            </label>
        </div>
    }
}

Update the imports to match your project setup.

Usage

use crate::components::ui::checkbox::Checkbox;

<Checkbox label="Accept terms and conditions" />
Rust UI Icons - ChevronLeftCarouselCommandRust UI Icons - ChevronRight