Checkbox
Rust UI component that displays a control that allows the user to toggle between checked and not checked.
utils
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
// Coming soon 🦀