Chakra-UI

I♥️Components

Radio

|

Chakra Docs

|

⦾ The Chakra UI Radio component is a versatile and accessible form component used for selecting options from a predefined set and for handling selection inputs in forms. It provides a consistent and customizable radio button interface, enhancing user experience and making form inputs more intuitive.

You can use additional components such as FormControl , FormLabel, and FormHelperText to further enhance your form inputs. These components work seamlessly with the Radio component and offer functionalities like form validation, labeling, and accessibility enhancements.

  • Radio: represents an individual radio button option. It renders an accessible <input type="radio"> element and provides various props and customization options to control its appearance and behavior.
  • RadioGroup: enables you to group multiple Radio buttons together, ensuring that only one option can be selected at a time. It manages the state of the selected Radio button within the group.

These components can be imported as follows:

Examples

Basic Usage

⦾ This example showcases a basic RadioGroup with three options: "Choice A," "Choice B," and "Choice C." Users can select only one option at a time. The Radio buttons are visually styled, and the selected option is highlighted.

Code

Customizing Colors

⦾ In this example, you can see the various colorScheme options available for the RadioGroup component. Each styled Radio component below has had its colorScheme prop set to the corresponsing colorScheme label beside it.

Code

Customizing Sizes

⦾ These are the three available sizes for Radiobuttons: small ("sm"), medium ("md"), and large ("lg"). Each Radio button has a different size and color scheme.

Code

Disabling

⦾ This example demonstrates how to disable Radio buttons. The third Radio button is disabled, indicating a pre-selected option. The other Radio buttons can be selected by the user. This example can be used when certain options are not applicable or unavailable in specific scenarios.

Code

Aligning Horizontally

⦾ In this example, we align the Radio buttons horizontally using the Stack component. The Radio buttons are spaced evenly, and their alignment facilitates easier comparison and selection. This example can be used when you want to present the options in a horizontal layout for better visual scanning.

Code

Invalid Radio Option

⦾ This example showcases an invalid Radio button. The Radio button appears visually different, indicating an error state. This example can be used to communicate validation errors or invalid selections to the user.

Code

Further Customization

⦾ In some cases, you might need to create components that work like radios but don't look like radios. Chakra UI exports the useRadio and useRadioGroup hooks to assist in this scenario. With these hooks, you can create custom radio button components that suit your specific design needs. This example demonstrates how to create a custom RadioButtons component using the useRadio hook and control a group of custom radios using the useRadioGroup hook.

Choose a pet:

Code

Did you know?

Creative Idea No. 1

Emoji Ratings: You can use the Radio component for emoji-based or otherwise stylized ratings. Instead of traditional radio labels, you can display emojis representing different ratings and allow users to select their preferred rating.

Rate your experience:

Your selected rating:

Code

Creative Idea No. 2

Custom Radio Toggles: You can create custom radio toggles using the Radio component and style the radios to appear as toggle buttons to provide a unique user interface for selection.

Which color?

Code

Creative Idea No. 3

Radio Carousel: You can also use the Radio component to build a carousel with radio buttons. Each radio button represents a slide, and users can navigate through the carousel by selecting different radio buttons.

Select a slide:

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.