Arctic Design
Get StartedFoundationsComponentsExamples
K

Radio

Groups radio buttons, allowing users to select one option from a set of mutually exclusive choices.

Usage
Size
With Separator
Disabled
Read Only
Required
import { useState } from 'react';
import { OptionType, RadioGroup } from '@arctic-kit/snow';
function Demo() {
const [value, setValue] = useState('');
const onChange = (val: OptionType['value']) => {
setValue(val);
};
return (
<RadioGroup
label="Select an option" color="primary" size="medium" withSeparator
id='sample-radio-grp'
options={[
{ label: 'Ford Mustang', value: 'ford_mustang' },
{ label: 'Chevrolet Camaro', value: 'chevrolet_camaro' },
{ label: 'Porsche 911', value: 'porsche_911' },
{ label: 'Tesla Model S', value: 'tesla_model_s' },
{ label: 'Ferrari F40', value: 'ferrari_f40' },
{ label: 'Lamborghini Aventador', value: 'lamborghini_aventador' },
{ label: 'Audi R8', value: 'audi_r8' },
{ label: 'BMW M3', value: 'bmw_m3' },
]}
value={value}
onChange={onChange}
/>
);
}

API Reference

PropsTypeDefault
colorSnowColorprimary
disabledboolean | undefinedfalse
errorboolean | undefinedfalse
onClick((selectedOption: OptionType) => void) | undefined---
optionOptionType---
readOnlyboolean | undefinedfalse
selectedValuestring | undefined---
size"small" | "medium" | "large""medium"
stopPropagationboolean | undefined---
withSeparatorboolean | undefinedfalse