Plus UI ↗️Be Our Sponsor ↗️

Radio

Elevate Choices with Our Radiant Radio Buttons

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.

anatomy of radio component

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
State
Size
Disabled
Read-Only

True

Default

Small

True

True

False

Hovered

Medium

False

False

Pressed

Large

Readonly

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

import React from 'react';
import { PlusRadioGroup, PlusRadio } from '@plusui/react';

const RadioGroupWithCheckedItem = () => (
  <PlusRadioGroup orientation="horizontal" size="md" label="Choose an option">
    <PlusRadio text="Option 1" checked />  {/* Checked radio item */}
    <PlusRadio text="Option 2" />
    <PlusRadio text="Option 3" />
  </PlusRadioGroup>
);

export default RadioGroupWithCheckedItem;

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.

import React from 'react';
import { PlusRadioGroup, PlusRadio } from '@plusui/react';

// Default Radio Group
const DefaultRadioGroup = () => (
  <PlusRadioGroup orientation="vertical" size="md" label="Choose a payment method">
    <PlusRadio text="Credit Card" />
    <PlusRadio text="PayPal" checked />
    <PlusRadio text="Bank Transfer" />
  </PlusRadioGroup>
);

// Readonly Radio Group
const ReadonlyRadioGroup = () => (
  <PlusRadioGroup orientation="vertical" size="md" label="Choose a shipping method">
    <PlusRadio text="Standard" readonly />
    <PlusRadio text="Express" readonly checked />
    <PlusRadio text="Overnight" readonly />
  </PlusRadioGroup>
);

// Disabled Radio Group
const DisabledRadioGroup = () => (
  <PlusRadioGroup orientation="vertical" size="md" label="Choose a subscription plan">
    <PlusRadio text="Monthly" disabled />
    <PlusRadio text="Yearly" disabled checked />
    <PlusRadio text="Lifetime" disabled />
  </PlusRadioGroup>
);

export default {
  DefaultRadioGroup,
  ReadonlyRadioGroup,
  DisabledRadioGroup,
};

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 Group
const SmallRadioGroup = () => (
  <PlusRadioGroup orientation="horizontal" size="sm" label="Select a Color">
    <PlusRadio text="Red" />
    <PlusRadio text="Green" />
    <PlusRadio text="Blue" />
  </PlusRadioGroup>
);

// Medium Size Radio Group
const MediumRadioGroup = () => (
  <PlusRadioGroup orientation="horizontal" size="md" label="Select a Gender">
    <PlusRadio text="Male" />
    <PlusRadio text="Female" />
    <PlusRadio text="Other" />
  </PlusRadioGroup>
);

// Large Size Radio Group
const LargeRadioGroup = () => (
  <PlusRadioGroup orientation="horizontal" size="lg" label="Choose a Vehicle">
    <PlusRadio text="Car" />
    <PlusRadio text="Bike" />
    <PlusRadio text="Bus" />
  </PlusRadioGroup>
);

export default {
  SmallRadioGroup,
  MediumRadioGroup,
  LargeRadioGroup,
};

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 Group
const DefaultRadioGroup = () => (
  <PlusRadioGroup orientation="horizontal" size="md" label="Select a Fruit">
    <PlusRadio text="Apple" />
    <PlusRadio text="Banana" />
    <PlusRadio text="Orange" />
  </PlusRadioGroup>
);

// Error Status Radio Group
const ErrorRadioGroup = () => (
  <PlusRadioGroup orientation="horizontal" size="md" label="Select a Fruit" error>
    <PlusRadio text="Apple" />
    <PlusRadio text="Banana" />
    <PlusRadio text="Orange" />
  </PlusRadioGroup>
);

export default {
  DefaultRadioGroup,
  ErrorRadioGroup,
};

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.

import { PlusRadioGroup, PlusRadio } from '@plusui/react';

function App() {
    return (
        <>
            <PlusRadioGroup>
                <PlusRadio text="Radio Text" checked></PlusRadio>
                <PlusRadio text="Radio Text"></PlusRadio>
            </PlusRadioGroup>
            <PlusRadioGroup orientation="vertical">
                <PlusRadio text="Radio Text" checked></PlusRadio>
                <PlusRadio text="Radio Text"></PlusRadio>
            </PlusRadioGroup>
        </>
    );
}

Required

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.

import React from 'react';
import { PlusRadioGroup, PlusRadio } from '@plusui/react';

const RequiredRadioGroup = () => (
  <PlusRadioGroup size="md" label="Choose a programming language" required>
    <PlusRadio text="Python" />
    <PlusRadio text="JavaScript" />
    <PlusRadio text="Java" />
  </PlusRadioGroup>
);

export default RequiredRadioGroup;

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.

layout and spacing of radio component

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.

light and dark mode of radio component

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.

Criteria
Description
Status

ID Attribute

Ensures every id attribute value used in ARIA and in labels is unique

Passed

ID Attribute Value

Ensures every id attribute value is unique

Passed

Form fields

Ensures form field does not have multiple label elements

Passed

Form elements

Ensures that every form element has a visible label and is not solely labeled using hidden labels,
or the title or aria-describedby attributes

Passed

Interactive Controls

Ensures interactive controls are not nested as they are not always announced by screen readers
or can cause focus problems for assistive technologies

Passed

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA 
contrast ratio thresholds.

AA ~ AAA

Design System

LogoPlus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma

API

Plus-Radio

Plus-Radio-Group

Property
Description
Type
Accepted Values
Default

orientation

Determines if the group is horizontal or vertical

String

horizontal, vertical

horizontal

size

Sets the size of the radio group

String

sm, md, lg

md

label

The label for the radio group

String

Any valid string

null

caption

Additional text or description for the group

String

Any valid string

null

error

Indicates if the group has an error

Boolean

true, false

false

required

Indicates if the group has required fields

Boolean

true, false

false

name

Form input name attribute for the radio group

String

Any valid string

null

value

Current selected value of the radio group

String

Any valid string

null

PreviousProgressNextRating

Last updated

Was this helpful?