Our radio component is crafted for seamless decision-making, providing an elegant and intuitive interface that simplifies selection processes, making it a delight for users to navigate and choose options effortlessly.
Anatomy
Featuring circular or elliptical buttons with a distinctive selection indicator, our radio component includes clear labels, guiding users through a visually appealing and user-friendly design that ensures clarity in option selection.
Properties
With essential properties like "checked" to determine the selected option, our radio component offers a straightforward yet robust set of features. The "disabled" property restricts user interaction when needed, ensuring controlled behavior in various contexts.
Checked
Default radio component represents an unselected state, providing users with a clear set of options to choose from.
Checked radio component indicates the user's selection within a group of options. It’s filled, highlighting the chosen radio button
<plus-radio-grouporientation="horizontal"size="md"label="Choose an option"> <plus-radiotext="Option 1"checked></plus-radio> <!-- Checked radio item --> <plus-radiotext="Option 2"></plus-radio> <plus-radiotext="Option 3"></plus-radio></plus-radio-group>
<template> <plus-radio-grouporientation="horizontal"size="md"label="Choose an option"> <plus-radiotext="Option 1"checked /> <!-- Checked radio item --> <plus-radiotext="Option 2" /> <plus-radiotext="Option 3" /> </plus-radio-group></template>
<plus-radio-grouporientation="horizontal"size="md"label="Choose an option"> <plus-radiotext="Option 1"checked></plus-radio> <!-- Checked radio item --> <plus-radiotext="Option 2"></plus-radio> <plus-radiotext="Option 3"></plus-radio></plus-radio-group>
State
The state of radio component represents the current visual state of the radio button, with options including default, hover, press, readonly, and error, offering a dynamic and responsive user interface.
Default radio state represents the unselected and normal state of the radio component.
Hovered radio responds dynamically to interactions. As the user hovers over the radio button, it may showcase a subtle visual change.
Pressed radio is activated when a user clicks or taps on the radio button.
Read-only radio is static and non-interactive. Users cannot select or modify the radio button in this mode.
Disabled radio indicates that the radio component is temporarily inactive or unavailable for interaction.
<!-- Default Radio Group --><plus-radio-grouporientation="vertical"size="md"label="Choose a payment method"> <plus-radiotext="Credit Card"></plus-radio> <plus-radiotext="PayPal"checked></plus-radio> <plus-radiotext="Bank Transfer"></plus-radio></plus-radio-group><!-- Readonly Radio Group --><plus-radio-grouporientation="vertical"size="md"label="Choose a shipping method"> <plus-radiotext="Standard"readonly></plus-radio> <plus-radiotext="Express"readonlychecked></plus-radio> <plus-radiotext="Overnight"readonly></plus-radio></plus-radio-group><!-- Disabled Radio Group --><plus-radio-grouporientation="vertical"size="md"label="Choose a subscription plan"> <plus-radiotext="Monthly"disabled></plus-radio> <plus-radiotext="Yearly"disabledchecked></plus-radio> <plus-radiotext="Lifetime"disabled></plus-radio></plus-radio-group>
<template><!-- Default Radio Group --> <plus-radio-grouporientation="vertical"size="md"label="Choose a payment method"> <plus-radiotext="Credit Card" /> <plus-radiotext="PayPal"checked /> <plus-radiotext="Bank Transfer" /> </plus-radio-group><!-- Readonly Radio Group --> <plus-radio-grouporientation="vertical"size="md"label="Choose a shipping method"> <plus-radiotext="Standard"readonly /> <plus-radiotext="Express"readonlychecked /> <plus-radiotext="Overnight"readonly /> </plus-radio-group><!-- Disabled Radio Group --> <plus-radio-grouporientation="vertical"size="md"label="Choose a subscription plan"> <plus-radiotext="Monthly"disabled /> <plus-radiotext="Yearly"disabledchecked /> <plus-radiotext="Lifetime"disabled /> </plus-radio-group></template>
<!-- Default Radio Group --><plus-radio-grouporientation="vertical"size="md"label="Choose a payment method"> <plus-radiotext="Credit Card"></plus-radio> <plus-radiotext="PayPal"checked></plus-radio> <plus-radiotext="Bank Transfer"></plus-radio></plus-radio-group><!-- Readonly Radio Group --><plus-radio-grouporientation="vertical"size="md"label="Choose a shipping method"> <plus-radiotext="Standard"readonly></plus-radio> <plus-radiotext="Express"readonlychecked></plus-radio> <plus-radiotext="Overnight"readonly></plus-radio></plus-radio-group><!-- Disabled Radio Group --><plus-radio-grouporientation="vertical"size="md"label="Choose a subscription plan"> <plus-radiotext="Monthly"disabled></plus-radio> <plus-radiotext="Yearly"disabledchecked></plus-radio> <plus-radiotext="Lifetime"disabled></plus-radio></plus-radio-group>
Size
The size of radio offers flexibility in design, allowing developers to choose from small, medium, and large checkboxes based on their application's aesthetic and layout preferences. By adjusting the size property, you can make the radio button larger or smaller, providing flexibility in meeting specific layout requirements.
import React from'react';import { PlusRadioGroup, PlusRadio } from'@plusui/react';// Small Size Radio GroupconstSmallRadioGroup= () => ( <PlusRadioGrouporientation="horizontal"size="sm"label="Select a Color"> <PlusRadiotext="Red" /> <PlusRadiotext="Green" /> <PlusRadiotext="Blue" /> </PlusRadioGroup>);// Medium Size Radio GroupconstMediumRadioGroup= () => ( <PlusRadioGrouporientation="horizontal"size="md"label="Select a Gender"> <PlusRadiotext="Male" /> <PlusRadiotext="Female" /> <PlusRadiotext="Other" /> </PlusRadioGroup>);// Large Size Radio GroupconstLargeRadioGroup= () => ( <PlusRadioGrouporientation="horizontal"size="lg"label="Choose a Vehicle"> <PlusRadiotext="Car" /> <PlusRadiotext="Bike" /> <PlusRadiotext="Bus" /> </PlusRadioGroup>);exportdefault { SmallRadioGroup, MediumRadioGroup, LargeRadioGroup,};
<!-- Small Size Radio Group --><plus-radio-grouporientation="horizontal"size="sm"label="Select a Color"> <plus-radiotext="Red"></plus-radio> <plus-radiotext="Green"></plus-radio> <plus-radiotext="Blue"></plus-radio></plus-radio-group><!-- Medium Size Radio Group --><plus-radio-grouporientation="horizontal"size="md"label="Select a Gender"> <plus-radiotext="Male"></plus-radio> <plus-radiotext="Female"></plus-radio> <plus-radiotext="Other"></plus-radio></plus-radio-group><!-- Large Size Radio Group --><plus-radio-grouporientation="horizontal"size="lg"label="Choose a Vehicle"> <plus-radiotext="Car"></plus-radio> <plus-radiotext="Bike"></plus-radio> <plus-radiotext="Bus"></plus-radio></plus-radio-group>
<template><!-- Small Size Radio Group --> <plus-radio-grouporientation="horizontal"size="sm"label="Select a Color"> <plus-radiotext="Red" /> <plus-radiotext="Green" /> <plus-radiotext="Blue" /> </plus-radio-group><!-- Medium Size Radio Group --> <plus-radio-grouporientation="horizontal"size="md"label="Select a Gender"> <plus-radiotext="Male" /> <plus-radiotext="Female" /> <plus-radiotext="Other" /> </plus-radio-group><!-- Large Size Radio Group --> <plus-radio-grouporientation="horizontal"size="lg"label="Choose a Vehicle"> <plus-radiotext="Car" /> <plus-radiotext="Bike" /> <plus-radiotext="Bus" /> </plus-radio-group></template>
<!-- Small Size Radio Group --><plus-radio-grouporientation="horizontal"size="sm"label="Select a Color"> <plus-radiotext="Red"></plus-radio> <plus-radiotext="Green"></plus-radio> <plus-radiotext="Blue"></plus-radio></plus-radio-group><!-- Medium Size Radio Group --><plus-radio-grouporientation="horizontal"size="md"label="Select a Gender"> <plus-radiotext="Male"></plus-radio> <plus-radiotext="Female"></plus-radio> <plus-radiotext="Other"></plus-radio></plus-radio-group><!-- Large Size Radio Group --><plus-radio-grouporientation="horizontal"size="lg"label="Choose a Vehicle"> <plus-radiotext="Car"></plus-radio> <plus-radiotext="Bike"></plus-radio> <plus-radiotext="Bus"></plus-radio></plus-radio-group>
Status
Default radio status is in its normal state, indicating an unselected option.
Error radio status occurs when there is an issue or validation error associated with the radio component.
import React from'react';import { PlusRadioGroup, PlusRadio } from'@plusui/react';// Default Status Radio GroupconstDefaultRadioGroup= () => ( <PlusRadioGrouporientation="horizontal"size="md"label="Select a Fruit"> <PlusRadiotext="Apple" /> <PlusRadiotext="Banana" /> <PlusRadiotext="Orange" /> </PlusRadioGroup>);// Error Status Radio GroupconstErrorRadioGroup= () => ( <PlusRadioGrouporientation="horizontal"size="md"label="Select a Fruit"error> <PlusRadiotext="Apple" /> <PlusRadiotext="Banana" /> <PlusRadiotext="Orange" /> </PlusRadioGroup>);exportdefault { DefaultRadioGroup, ErrorRadioGroup,};
<!-- Default Status Radio Group --><plus-radio-grouporientation="horizontal"size="md"label="Select a Fruit"> <plus-radiotext="Apple"></plus-radio> <plus-radiotext="Banana"></plus-radio> <plus-radiotext="Orange"></plus-radio></plus-radio-group><!-- Error Status Radio Group --><plus-radio-grouporientation="horizontal"size="md"label="Select a Fruit"error> <plus-radiotext="Apple"></plus-radio> <plus-radiotext="Banana"></plus-radio> <plus-radiotext="Orange"></plus-radio></plus-radio-group>
<template><!-- Default Status Radio Group --> <plus-radio-grouporientation="horizontal"size="md"label="Select a Fruit"> <plus-radiotext="Apple"></plus-radio> <plus-radiotext="Banana"></plus-radio> <plus-radiotext="Orange"></plus-radio> </plus-radio-group><!-- Error Status Radio Group --> <plus-radio-grouporientation="horizontal"size="md"label="Select a Fruit"error> <plus-radiotext="Apple"></plus-radio> <plus-radiotext="Banana"></plus-radio> <plus-radiotext="Orange"></plus-radio> </plus-radio-group></template>
<!-- Default Status Radio Group --><plus-radio-grouporientation="horizontal"size="md"label="Select a Fruit"> <plus-radiotext="Apple"></plus-radio> <plus-radiotext="Banana"></plus-radio> <plus-radiotext="Orange"></plus-radio></plus-radio-group><!-- Error Status Radio Group --><plus-radio-grouporientation="horizontal"size="md"label="Select a Fruit"error> <plus-radiotext="Apple"></plus-radio> <plus-radiotext="Banana"></plus-radio> <plus-radiotext="Orange"></plus-radio></plus-radio-group>
Radio Group
Our Radio Group component provides a seamless way to create sets of radio buttons for user selection. What sets it apart is the flexibility it offers in terms of layout. The component can be customized to render radio buttons either horizontally or vertically, adapting to your specific design preferences.
The required radio group component emphasizes the mandatory nature of the radio selection. It ensures that users understand the necessity of making a choice by using visual indicators like asterisks, bold labels, or other cues to highlight the importance of selecting an option.
<plus-radio-groupsize="md"label="Choose a programming language"required> <plus-radiotext="Python"></plus-radio> <plus-radiotext="JavaScript"></plus-radio> <plus-radiotext="Java"></plus-radio></plus-radio-group>
Layout & Spacing
Our radio component prioritizes thoughtful layout and spacing, contributing to an organized and visually cohesive form. Consistent alignment ensures an aesthetically pleasing design, enhancing the overall user experience during option selection.
Light & Dark Mode
Seamlessly adapting to both light and dark modes, our radio component ensures optimal visibility and readability in diverse lighting conditions. Careful consideration of color choices and contrast adjustments guarantees a comfortable and stylish user experience, irrespective of the interface theme.
Accessibility
Built with accessibility at the forefront, our radio component incorporates features such as clear labels, logical tab order, keyboard navigation, and appropriate ARIA roles. This commitment to accessibility ensures that the component is usable by all, including those with disabilities, fostering inclusivity in the digital environment.