agrp.dev logo
Components
BadgeButtonCheckboxCollapseDatePickerIconIndicatorInputMessageNotificationPaginationProgressRadioCommon usageBasic usageDisabled valuesSelectSkeletonSwitchTabsTextAreaTimelineTooltipsTypography

Radio

Component to display switch between defined options

Common usage

import React, { useState } from 'react';
import { RadioButtons, RadioButtonProps } from '@atlasgroup/react-atlantic';
const Component = () => {
const values = [
{ value: 'UK', label: 'England πŸ‡¬πŸ‡§' },
{ value: 'CZ', label: 'Czech Republic πŸ‡¨πŸ‡Ώ' },
];
const [value, setValue] = useState<string>(values[0].value);
const onChange: RadioButtonProps['onChange'] = (e) => setValue(e.currentTarget.value);
return <RadioButtons values={values} value={value} onChange={onChange} groupName="groupToFocusBy" />;
};

Basic usage

Buttons

Disabled values

Values can be disabled by providing them isDisabled value in values definition β†’ defaults to false