Search documentation v0.5.0

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

Small Medium Large

---
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>

<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}
/>

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:

Selected

Disabled

Selected & disabled

<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:

Starter

For getting started

Standard

For existing small businesses

Premium

For enterprise solutions

<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:

Small Medium Large

Starter

For getting started

Standard

For existing small businesses

Premium

For enterprise solutions

<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

Prop	Purpose
`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 Prop	Purpose
`onChange`	Attach on-change event listeners.

<- Progress Rating ->

Request improvement for this page