Radio

Radio.

When To Use

• Used to select a single state in multiple options.
• The difference between Select is that Radio is visible to user and can facilitate the comparison of choice, which makes there shouldn't be too many of them.

Examples

import { Radio, RadioGroup } from 'tailor-ui';

Radio

Basic

Radio

Radio

Use with FormField

Checked Required

Click Me

this is a required field

Disabled

Radio

Disabled

RadioGroup

Basic

Radio A

Radio B

Radio C

Radio D

Radio A

Radio B

Radio C

Radio D

Controlled

Radio A

Radio B

Radio C

Radio D

Composition render

radio 1

radio 2

radio 3

radio 4

radio 1

radio 2

radio 3

radio 4

Direction

radio 1

radio 2

radio 3

radio 4

Use with FormField

Yes or No?

Yes

No

Should press yes

API

Radio

Property	Description	Type	Default
checked	Specifies whether the Radio is selected	boolean
defaultChecked	Specifies the initial state: whether or not the Radio is selected	boolean
disabled	Disable Radio	boolean	false
onChange	The callback function that is triggered when the state changes	(event: ChangeEvent) => void
value	The value of radio	string
id	The id of radio	string
onFocus		(event: FocusEvent) => void
onBlur		(event: FocusEvent) => void

RadioGroup

Property	Description	Type	Default
direction	to specify the direction of the step bar	'horizontal' 'vertical'
defaultValue	To set the initial value	string[]
options	Specifies options	{ label: ReactNode; value: string; disabled?: boolean; }[]
value	Used for setting the currently selected value	string[]
onChange	The callback function that is triggered when the state changes	(value: string[]) => void