- Docs
- components
- RadioGroup
RadioGroup
A RadioGroup allows users to select a single option from a list of mutually exclusive options.
This project is archived.
shadcn/ui now officially supports React Aria Components. Use shadcn/ui instead
A RadioGroup allows users to select a single option from a list of mutually exclusive options.
Radio groups can be built in HTML with the <fieldset> and <input> elements, however these can be difficult to style. RadioGroup and Radio help achieve accessible radio groups that can be styled as needed.
npx shadcn@latest add https://jollyui.dev/default/radio-groupA RadioGroup uses the following components, which may also be used standalone or reused in other components.
A label provides context for an element.
If you will use a RadioGroup in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper JollyRadioGroup. This wrapper serves as an excellent starting point for use throughout your codebase.
The JollyRadioGroup component extends the props of React Aria RadioGroup and adds:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the radio group |
description | string | undefined | undefined | Description text for the radio group |
errorMessage | string | ((validation: AriaValidationResult) => string) | undefined | undefined | Error message to display or function to generate it |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.
The entire RadioGroup can be disabled with the isDisabled prop.
To disable an individual radio, pass isDisabled to the Radio instead.