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>

Option 1Option 2Option 3

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>

Option 1Option 2Option 3

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>

Option 1Option 2Option 3

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>

Option 1Option 2Option 3

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>

Option 1Option 2Option 3

Please select an option

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)

Option 1Option 2Option 3

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?

Option 1Option 2Option 3

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>

Option 1Option 2Option 3

Full API

Name	Type	Default
`ref`	`LegacyRef<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).
`key`	`Key \| 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