Radio Button Group
Rust/UI component that displays a group of radio buttons.
- Copy Demo
use leptos::prelude::*;
use crate::components::ui::radio_button_group::{RadioButton, RadioButtonGroup, RadioButtonText};
/* ========================================================== */
/* ✨ FUNCTIONS ✨ */
/* ========================================================== */
#[component]
pub fn DemoRadioButtonGroup() -> impl IntoView {
view! {
<style>
{".radio__button[type=\"radio\"] {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.radio__button[type=\"radio\"]:checked + span {
box-shadow: 0 0 0 0.0625em var(--primary);
background-color: var(--secondary);
z-index: 1;
color: var(--primary);
}"}
</style>
<RadioButtonGroup>
<RadioButton checked=true>
<RadioButtonText>Women</RadioButtonText>
</RadioButton>
<RadioButton>
<RadioButtonText>Men</RadioButtonText>
</RadioButton>
<RadioButton>
<RadioButtonText>Divided</RadioButtonText>
</RadioButton>
</RadioButtonGroup>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_radio_button_groupui add radio_button_groupUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/radio_button_group.rs
use leptos::prelude::*;
use leptos_ui::{clx, void};
const BASE_BUTTON_GROUP: &str = "flex flex-wrap justify-center mt-2";
mod components {
use super::*;
clx! {RadioButtonText, span, "block cursor-pointer bg-transparent text-primary px-3 py-1.5 relative ml-px shadow-[0_0_0_1px_#b5bfd9] tracking-wider text-center transition-colors duration-500"}
void! {RootInput, input, "radio__button", "focus:outline-0 focus:border-input/60"}
clx! {RootFieldset, fieldset, BASE_BUTTON_GROUP}
clx! {RootButtonGroup, div, BASE_BUTTON_GROUP, "[&>label:first-child>span]:rounded-l-md [&>label:last-child>span]:rounded-r-md"}
}
pub use components::*;
/* ========================================================== */
/* ✨ FUNCTIONS ✨ */
/* ========================================================== */
#[component]
pub fn RadioButtonGroup(children: Children) -> impl IntoView {
view! {
<RootFieldset>
<RootButtonGroup attr:role="radio-button-group">{children()}</RootButtonGroup>
</RootFieldset>
}
}
#[component]
pub fn RadioButton(children: Children, #[prop(into, optional)] checked: bool) -> impl IntoView {
view! {
<label>
<RootInput attr:r#type="radio" attr:name="radio" attr:checked=checked />
{children()}
</label>
}
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀