Radio RS Dioxus Examples

Default Headless Radio Buttons

Group {
    selected: selected.clone(),
    onchange: |value| selected.set(value),
    Radio { value: "mac", label: "Mac", input_style: "" }
    Radio { value: "windows", label: "Windows", input_style: "" }
    Radio { value: "linux", label: "Linux", input_style: "" }
}

Mac

Windows

Linux

Horizontal Headless Radio Buttons

Group {
    selected: os_selected.clone(),
    onchange: |value| os_selected.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: "" }
}

Mac

Windows

Linux

Disabled Radio Buttons

Group {
    selected: browser_selected.clone(),
    onchange: |value| browser_selected.set(value),
    Radio { value: "mac", label: "Mac", input_style: "", disabled: true }
    Radio { value: "windows", label: "Windows", input_style: "", disabled: true }
    Radio { value: "linux", label: "Linux", input_style: "", disabled: true }
}

Mac

Windows

Linux

Horizontal Radio Buttons With Images

Group {
    selected: os_selected.clone(),
    onchange: |value| os_selected.set(value),
    orientation: Orientation::Horizontal,
    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",
    }
}

Mac

Windows

Linux