Radio

With our Radio button, making choices is smooth sailing. One click, one choice, zero confusion!

Example

1import { Radio, FlexBox } from '@sugarcoat/ui';
2
3<FlexBox gap='3' justify='center'>
4 <Radio>
5 <Radio.Item id='check1' label='Pick me' value='1' />
6 <Radio.Item id='check2' label='Pick me' value='2' />
7 <Radio.Item id='check3' label='Pick me' value='3' />
8 </Radio>
9</FlexBox>
10

API Reference

ComponentDescription
Radio

The exclusive club. A group of options where only one can be chosen at a time, ensuring users make a single, clear choice from a list.

Radio.Item

The individual contender. A single option within the Radio group, vying for the user’s selection as the chosen one.

Component Properties

Radio
PropTypeDefaultExplanation
sizestringsm

The size of the entire Radio component (at the moment, does not affect the label font).

colorstringdefault

The color variant of Radio Box and Indicator

defaultValuestring

The default value of the Radio group. This tells which item is selected at render

valuestring

Same as defaultValue but controlled by state.

onValueChangefunction-

Callback function that is called when value changes. Returns the new value

labelstring-

Text to be used as Label alongside the Radio box

orientationstringhorizontal

Orientation of the Radio items (vertical or horizontal)

Radio.Item
PropTypeDefaultExplanation
idstring-

The unique identifier. A string that gives your Radio.Item a distinct identity.

valuestring-

The underlying data piece that gets transmitted when the Radio.Item is selected, representing its true value.

disabledbooleanfalse

When true, prevents interaction with the Radio.Item, rendering it untouchable in the UI.

requiredbooleanfalse

When true, mandates the selection of a Radio.Item in the group before the user can proceed.

Customize The Look
Check out these sample themes
Or create your ownBrand color
Accent color
Neutral color
Border radius