Radio RS Leptos Examples

Default Headless Radio Buttons

<Group
    selected={selected_state}
    onchange={Callback::from(move |value: String| selected_state.set(value))}
>
    <Radio value="mac" label="Mac" input_style="" />
    <Radio value="windows" label="Windows" input_style="" />
    <Radio value="linux" label="Linux" input_style="" />
</Group>
Mac
Windows
Linux

Horizontal Headless Radio Buttons

<Group
    selected={selected_state}
    onchange={Callback::from(move |value: String| selected_state.set(value))}
    orientation={Orientation::Horizontal}
>
    <Radio value="mac" label="Mac" input_style="" />
    <Radio value="windows" label="Windows" input_style="" />
    <Radio value="linux" label="Linux" input_style="" />
</Group>
Mac
Windows
Linux

Disabled Radio Buttons

<Group
    selected={selected_state}
    onchange={Callback::from(move |value: String| selected_state.set(value))}
>
    <Radio value="chrome" label="Chrome" disabled=true input_style="" />
    <Radio value="firefox" label="Firefox" disabled=true input_style="" />
    <Radio value="edge" label="Edge" disabled=true input_style="" />
</Group>
Chrome
Firefox
Edge

Horizontal Radio Buttons With Images

<Group
    selected={selected_state}
    onchange={Callback::from(move |value: String| selected_state.set(value))}
    orientation={Orientation::Horizontal}
    class="flex items-center gap-4 justify-center"
>
    <Radio
        value="mac"
        label="Mac"
        src="assets/apple.png"
        class="p-4 border-gray-400 border items-center rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-blue-500 bg-blue-100 text-blue-800"
        image_class="w-16"
    />
    <Radio
        value="windows"
        label="Windows"
        src="assets/windows.png"
        class="p-4 border-gray-400 border items-center rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-blue-500 bg-blue-100 text-blue-800"
        image_class="w-16"
    />
    <Radio
        value="linux"
        label="Linux"
        src="assets/linux.png"
        class="p-4 border-gray-400 border items-center rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-blue-500 bg-blue-100 text-blue-800"
        image_class="w-16"
    />
</Group>
MacMac
WindowsWindows
LinuxLinux

Size Selector

<Group
    selected={selected_state}
    onchange={Callback::from(move |value: String| selected_state.set(value))}
    orientation={Orientation::Horizontal}
    class="flex items-center gap-4"
>
    <Radio
        value="xsmall"
        label="XSmall"
        size={Size::XSmall}
        class="border border-gray-400 rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-green-500 bg-green-100 text-green-800"
    />
    <Radio
        value="small"
        label="Small"
        size={Size::Small}
        class="border border-gray-400 rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-green-500 bg-green-100 text-green-800"
    />
    <Radio
        value="medium"
        label="Medium"
        size={Size::Medium}
        class="border border-gray-400 rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-green-500 bg-green-100 text-green-800"
    />
    <Radio
        value="large"
        label="Large"
        size={Size::Large}
        class="border border-gray-400 rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-green-500 bg-green-100 text-green-800"
    />
    <Radio
        value="xlarge"
        label="XLarge"
        size={Size::XLarge}
        class="border border-gray-400 rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-green-500 bg-green-100 text-green-800"
    />
    <Radio
        value="xxlarge"
        label="XXLarge"
        size={Size::XXLarge}
        class="border border-gray-400 rounded-lg cursor-pointer hover:shadow-md"
        selected_class="border-green-500 bg-green-100 text-green-800"
    />
</Group>
XSmall
Small
Medium
Large
XLarge
XXLarge