Search documentation v0.6.1

Radio

Select a single option from a predefined set of choices

Source ↗️ Report Issue ↗️

Use the Radio component for single choice selections, where you need to restrict users to select only a single option from a list of selections. They are commonly used in forms and surveys, settings and preferences, or decision making.

Preview
How to use Radio groups in Astro
---
import { Radio } from 'webcoreui/astro'
---
<Radio
items={[
{ label: 'Small', value: 'sm' },
{ label: 'Medium', value: 'md', selected: true },
{ label: 'Large', value: 'lg' }
]}
name="radio"
/>
<script>
let value
Array.from(document.querySelectorAll('[name="radio"]')).forEach(radio => {
radio.addEventListener('change', event => {
value = event.target.value
})
})
</script>
How to use Radio groups in Svelte
<script>
import { Radio } from 'webcoreui/svelte'
let radio
</script>
<Radio
items={[
{ label: 'Small', value: 'sm' },
{ label: 'Medium', value: 'md', selected: true },
{ label: 'Large', value: 'lg' }
]}
name="radio"
onChange={e => radio = e.target.value}
/>
How to use Radio groups in React
import React, { useState } from 'react'
import { Radio } from 'webcoreui/react'
const Component = () => {
const [radio, setRadio] = useState('')
return (
<Radio
items={[
{ label: 'Small', value: 'sm' },
{ label: 'Medium', value: 'md', selected: true },
{ label: 'Large', value: 'lg' }
]}
name="radio"
onChange={e => setRadio(e.target.value)}
/>
)
}
export default Component

Radio States

Radio buttons can have different states. Use the selected and disabled props on an item to make a radio button selected by default, or disable it:

<Radio items={[{ label: 'Selected', value: 'sm', selected: true }]} name="radio" />
<Radio items={[{ label: 'Selected', value: 'sm', disabled: true }]} name="radio" />
<Radio items={[{ label: 'Selected', value: 'sm', selected: true, disabled: true }]} name="radio" />

Labels and Styles

Radio buttons can be created with additional labels using the subText prop. The subText prop also supports HTML tags:

<Radio
items={[
{
label: 'Starter',
subText: 'For getting started',
value: 'starter',
selected: true
},
{
label: 'Standard',
subText: 'For existing small <a href="#" target="_blank">businesses</a>',
value: 'standard'
},
{
label: 'Premium',
subText: 'For enterprise solutions',
value: 'premium'
}
]}
name="radio"
/>

To align radio buttons next to each other, you can set the inline prop to true:

<Radio
items={[...]}
name="radio"
inline={true}
/>

Their color can also be styled on an individual level, using the color prop:

<Radio
items={[
{ label: 'Small', value: 'sm', selected: true },
{ label: 'Medium', value: 'md' },
{ label: 'Large', value: 'lg' }
]}
color="#1dd1a1" {/* red: #ee5253, blue: #48dbfb */}
name="radio"
/>

However, if you need to use a custom color for your radio groups globally, the preferred way to set colors is to override the following CSS variable:

html body {
--w-radio-color: #FFF;
}

API

type RadioProps = {
items: {
label: string
value: string
subText?: string
selected?: boolean
disabled?: boolean
}[]
name: string
color?: string
inline?: boolean
className?: string
}
type SvelteRadioProps = {
onChange?: (key: any) => any
} & RadioProps
type ReactRadioProps = {
onChange?: (key: any) => any
} & RadioProps
PropPurpose
items Sets items for the radio group. Each item must have a label and value properties.
items.subText Sets additional text under the item's label.
items.selected Sets the item as selected.
items.disabled Sets the item as disabled.
name Sets a name for the radio group that can be referenced.
color Sets the color of the radio buttons.
inline Sets the radio buttons to be displayed next to each other. Defaults to false.
className Pass additional CSS classes for the radio group.
Svelte & React PropPurpose
onChange Attach on-change event listeners.

Request improvement for this page