Radio RS Yew 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

Color Type 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="primary"
        label="Primary"
        class="p-4 rounded-full cursor-pointer border border-blue-500"
        selected_class="ring-4 ring-blue-300"
        r#type={Type::Primary}
    />
    <Radio
        value="secondary"
        label="Secondary"
        class="p-4 rounded-full cursor-pointer border border-gray-500"
        selected_class="ring-4 ring-gray-300"
        r#type={Type::Secondary}
    />
    <Radio
        value="success"
        label="Success"
        class="p-4 rounded-full cursor-pointer border border-green-500"
        selected_class="ring-4 ring-green-300"
        r#type={Type::Success}
    />
    <Radio
        value="info"
        label="Info"
        class="p-4 rounded-full cursor-pointer border border-teal-500"
        selected_class="ring-4 ring-teal-300"
        r#type={Type::Info}
    />
    <Radio
        value="warning"
        label="Warning"
        class="p-4 rounded-full cursor-pointer border border-yellow-500"
        selected_class="ring-4 ring-yellow-300"
        r#type={Type::Warning}
    />
    <Radio
        value="danger"
        label="Danger"
        class="p-4 rounded-full cursor-pointer border border-red-500"
        selected_class="ring-4 ring-red-300"
        r#type={Type::Danger}
    />
</Group>
Primary
Secondary
Success
Info
Warning
Danger

Animated Radio Buttons

<Group
    selected={selected_state}
    onchange={Callback::from(move |value: String| selected_state.set(value))}
    class="flex items-center gap-4"
>
    <Radio
        value="primary"
        label="Primary"
        selected_class="ring-4 ring-blue-300"
        class="p-4 rounded-lg cursor-pointer border border-blue-500 bg-blue-500 text-white"
        animation_class="transform hover:scale-150"
    />
    <Radio
        value="secondary"
        label="Secondary"
        selected_class="ring-4 ring-gray-300"
        class="p-4 rounded-lg cursor-pointer border border-gray-500 bg-gray-500 text-white"
        animation_class="transform hover:scale-150"
    />
</Group>
Primary
Secondary

Radio Buttons With Callbacks (Press F12)

<Group
    selected={selected_state}
    onchange={Callback::from(move |value: String| selected_state.set(value))}
    class="flex items-center gap-4"
>
    <Radio
        value="primary"
        label="Primary"
        onclick={Callback::from(|value: String| log::info!("{} has been selected", value))}
        selected_class="ring-4 ring-blue-300"
        class="p-4 rounded-lg cursor-pointer border border-blue-500 bg-blue-500 text-white"
    />
    <Radio
        value="secondary"
        label="Secondary"
        onclick={Callback::from(|value: String| log::info!("{} has been selected", value))}
        selected_class="ring-4 ring-gray-300"
        class="p-4 rounded-lg cursor-pointer border border-gray-500 bg-gray-500 text-white"
    />
</Group>
Primary
Secondary