Radio

This component should not be used in most cases. Use the RadioGroup component instead.

It can be used to create a radio input that can be serialized within a native form. The onChange event is called with the DOM event.

Uncontrolled

Result

Loading...

Live Editor

<> <Radio label="Apples" name="radio1" /> <Radio label="Bananas" name="radio1" /> <Radio label="Cantaloupe" name="radio1" /> </>

<>
    <Radio label="Apples" name="radio1" />
    <Radio label="Bananas" name="radio1" />
    <Radio label="Cantaloupe" name="radio1" />
</>

Description

Result

Loading...

Live Editor

<Radio label="Radio" description="Radio description" />

<Radio label="Radio" description="Radio description" />

Sizes

Result

Loading...

Live Editor

<> <Radio label="Small" size="sm" /> <Radio label="Medium" size="md" /> <Radio label="Large" size="lg" /> <Radio label="Extra Large" size="xl" /> </>

<>
    <Radio label="Small" size="sm" />
    <Radio label="Medium" size="md" />
    <Radio label="Large" size="lg" />
    <Radio label="Extra Large" size="xl" />
</>

States

Result

Loading...

Live Editor

<> <Radio label="Valid Radio" isValid validText="Valid text" /> <Radio label="Error Radio" isInvalid errorText="Error text" /> <Radio label="Warning Radio" isWarning warningText="Warning Text" /> </>

<>
    <Radio label="Valid Radio" isValid validText="Valid text" />
    <Radio label="Error Radio" isInvalid errorText="Error text" />
    <Radio label="Warning Radio" isWarning warningText="Warning Text" />
</>

Light

Used when the radio is on a dark background

Result

Loading...

Live Editor

<div className="p-3 bg-primary"> <Radio label="Radio" light description="Radio description" /> </div>

<div className="p-3 bg-primary">
    <Radio label="Radio" light description="Radio description" />
</div>

Analytics

The Radio component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'RADIO',
	actions: {
		onChange: { type: 'RADIO_CHANGE', payload: 'Change' },
	},
};

Props

```