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 --forceui add demo_checkboxui add checkboxUpdate 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::utilities::utils::Utils;
#[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 = Utils::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" />