Radio

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

Example

Pick me

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

Component	Description
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

Prop	Type	Default	Explanation
`size`	`string`	sm	The size of the entire Radio component (at the moment, does not affect the label font).
`color`	`string`	default	The color variant of Radio Box and Indicator
`defaultValue`	`string`		The default value of the Radio group. This tells which item is selected at render
`value`	`string`		Same as `defaultValue` but controlled by state.
`onValueChange`	`function`	-	Callback function that is called when value changes. Returns the new value
`label`	`string`	-	Text to be used as Label alongside the Radio box
`orientation`	`string`	horizontal	Orientation of the Radio items (vertical or horizontal)

Radio.Item

Prop	Type	Default	Explanation
`id`	`string`	-	The unique identifier. A string that gives your Radio.Item a distinct identity.
`value`	`string`	-	The underlying data piece that gets transmitted when the Radio.Item is selected, representing its true value.
`disabled`	`boolean`	false	When true, prevents interaction with the Radio.Item, rendering it untouchable in the UI.
`required`	`boolean`	false	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