Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationAtomsRadio

Radio

This component allows users to select one option from a set

Basic Usage

import { Radio, RadioOption } from '@krakentech/coral';
 
<Radio name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>

Properties

value

const [radioValue, setRadioValue] = useState("value-2");
 
<Radio value={radioValue} name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>
 
<Button onClick={() => setRadioValue('value-1')}>
    Change Value
</Button>

defaultValue

<Radio defaultValue="value-3" name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>

disabled

<Radio disabled={true} name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>

error / errorMessage

<Radio error errorMessage="Please select an option" name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>

optional

Note: You must pass title to get the optional indicator to show

<Radio optional name="radio" title="Radio title">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>
Radio title (optional)

theme

<Radio theme="tertiary500" name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>
 
<Radio theme="secondary500" name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>

title

<Radio title="Which option would you like?" name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>
Which option would you like?

Stateless Radio

If you need to use a RadioOption without using a parent Radio wrapper, Coral provides RadioStandalone. This allows you to use a basic, contextless radio input that you can control with your own state in your consuming app, rather than relying on any states in Coral.

<RadioStandalone value="value-1">
    I have no context without being given one
</RadioStandalone>

Event Handlers

<Radio onChange={(event, radioValue) => {}} onBlur={() => {}} name="radio">
    ...
</Radio>

Responsiveness

<Radio theme={{ base: 'dark', lg: 'light' }} name="radio">
    <RadioOption value="value-1">Option 1</RadioOption>
    <RadioOption value="value-2">Option 2</RadioOption>
    <RadioOption value="value-3">Option 3</RadioOption>
</Radio>

Full API

NameTypeDefault
childrenReactNode
namestring

The field name used on the POST request when the form is submitted.

valuestring | null

value should be supplied by the parent component to control the value of the Radio input.

titleReactNode

A title for this group of radio buttons.

defaultValuestring

Default value to be checked. This must match the value within one of the RadioOption children.

errorboolean

If true, the component will have error styling set.

false
errorMessagestring

If set, the ErrorMessage component will be rendered below the input with this text.

optionalboolean

Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator  optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.

false
themeResponsiveVariant<"tertiary500" | "secondary500">

The colourway applied to this component.

tertiary500
onChange(event: ChangeEvent<HTMLInputElement>, value: string) => void

Callback fired each time the user selects a radio button.

  • event The event source of the callback.
  • value The value of the selected radio button.
onBlurFocusEventHandler<HTMLInputElement>

Callback fired when the radio group loses user focus.

disabledboolean

If true, the entire component will be disabled and not respond to user interactions.

false
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};
refRef<HTMLDivElement> | undefined

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

keyKey | null | undefined

Design

What is the difference between a checkbox and a radio button?

A radio button only allows you select one option, however a checkbox allows you to select multiple items from a list of options.

Why are there two colour variations?

Our primary theme is our voltage radio button, this should be used 99% of the time. Our secondary ink variation is to be used on top of ice, commonly in payment sections.

Component breakdown

  • Border: 2px
  • Button colour: Voltage & Ink
  • Label colour: Ice & Siphon
  • Label: Body 2
Last updated on
MediaPlayerReview