Radio button

<RadioButtonGroup
	label='My radio buttons'
	value={value}
	onChange={(value) => setData(value)}
>
	<RadioButton
		value='first'
		label='First option'
	/>
	<RadioButton
		value='second'
		label='Second option'
	/>
</RadioButtonGroup>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Horizontal layout

<RadioButtonGroup
	label='My radio buttons'
	value={value}
	onChange={(value) => setData(value)}
	orientation='horizontal'
>
	<RadioButton
		value='first'
		label='First option'
	/>
	<RadioButton
		value='second'
		label='Second option'
	/>
</RadioButtonGroup>

Segmented design

<RadioButtonGroup
	label='My radio buttons'
	value={value}
	onChange={(value) => setData(value)}
	design='segmented'
>
	<RadioButton
		value='first'
		label='First option'
	/>
	<RadioButton
		value='second'
		label='Second option'
	/>
</RadioButtonGroup>

Disable certain items

<RadioButtonGroup
	label='My radio buttons'
	value={value}
	onChange={(value) => setData(value)}
>
	<RadioButton
		value='first'
		label='First option'
	/>
	<RadioButton
		value='second'
		label='Second option'
		subtitle='Disabled because of reasons'
		disabled
	/>
	<RadioButton
		value='third'
		label='Third option'
	/>
</RadioButtonGroup>