Radio

A Radio button lets users select a single option from a group. Radios that share the same name form a group in which only one option can be selected.

Usage

import { Radio } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState('daily');
  return <Radio name="cadence" value="daily" checked={value === 'daily'} onChange={() => setValue('daily')} />;
}

Props

Also accepts every standard <input> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

namerequired

Typestring

The name of the radio button group

valuerequired

Typestring | number

The value of the radio button

checked

Typeboolean

Whether the radio button is checked

onChange

Type(event: React.ChangeEvent<HTMLInputElement>) => void

Callback fired when the radio button state changes

size

TypeSelectorSize

Default'medium'

The size of the radio button

CSS variables

Color

--wb-public-radio-border-color

--wb-public-radio-bg

--wb-public-radio-checked-bg

--wb-public-radio-dot-color

--wb-public-radio-focus-border-color

--wb-public-radio-disabled-border-color

--wb-public-radio-disabled-bg

--wb-public-radio-disabled-dot-color

Size

--wb-public-radio-size-medium

--wb-public-radio-size-small

--wb-public-radio-size-extra-small

--wb-public-radio-dot-size-medium

--wb-public-radio-dot-size-small

--wb-public-radio-dot-size-extra-small

--wb-public-radio-border-radius