Radio

Radio elements play a crucial role in UI/UX design by facilitating exclusive selection among a set of options. This ensures that users can choose only one item from a list, streamlining clear decision-making processes and providing enhanced control.

Examples

Basic Usage

Illustrates a singular Radio button allowing users to make a choice with a simple click:

Advanced Customization

Size Variations

Showcases Radio buttons in different sizes: small, medium, and large, accommodating various design needs and enhancing UI flexibility:

Disabled state

Demonstrates a Radio button in a disabled state, indicating non-interactive periods or conditions within the user interface:

Group of Radio Buttons with Single Form Control

A set of Radio buttons grouped together, allowing users to select one option from multiple choices, with a single selected value reflected in the application:

Theme Customization

The Radio component adheres to the following default theme, ensuring aesthetic consistency and visual appeal:

root{}(5 keys)

Learn more about how to customize in the Theme documentation.

API

Tailor the Radio component's functionality to meet your project's requirements with a comprehensive set of properties:

Radio

Prop	Description	Default
`checked`	Whether the radio is checked or not. Required only if `Radio` is used independently outside a `RadioGroup`. If `Radio` is used inside a `RadioGroup` then the value is internally set depending upon if the `value` is same as the selected value. `boolean`
`label`	Label for the radio. `ReactNode`
`disabled`	Whether the radio is disabled or not. `boolean`
`className`	Additional class names to apply to the radio. `string`
`size`	Size of the radio. `string`	`medium`
`onChange`	Event handler for when the radio is changed. `(value: boolean) => void`
`onBlur`	Event handler for when the radio is blurred. `(event: FocusEvent<HTMLDivElement, Element>) => void`
`value`	Value passed to the form when used inside a `RadioGroup`. Required when `Radio` is used within a `RadioGroup` `any`
`theme`	Theme for the Radio. `RadioTheme`
`ref`	Reference to the radio element. `LegacyRef<HTMLDivElement>`

RadioGroup

Prop	Description	Default
`children` *	The Radio Buttons to display in the group. `any`
`className`	Additional CSS classes to apply to the Radio group `string`
`onChange` *	Event handler for when the radio selection is changed. `(value: any) => void`
`selectedValue` *	Default value of the Radio Button which is checked `any`

Design and Usability Tips

Label Legibility: Ensure that labels associated with radio buttons are clear, concise, and directly related to the options they represent. Labels should be positioned close to the respective radio button to maintain visual connection and prevent ambiguity during selection processes.
Distinctive Appearance: Design radio buttons to be visually distinctive from checkboxes to avoid confusion between multiple-choice and single-choice options. Employ standard design patterns, such as circular radio buttons with a filled circle indicator for the selected state, reinforcing their

Input Range