RadioGroup

RadioGroup groups the radio buttons that have the same purpose and describes this purpose to assistive technology users.

import { Flex } from '@semcore/ui/base-components';
import Radio, { RadioGroup } from '@semcore/ui/radio';
import type { RadioGroupProps } from '@semcore/ui/radio';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const Demo = (props: RadioGroupProps) => {
  const [value, setValue] = React.useState('1');
  return (
    <div>
      <RadioGroup

        name='radio'
        aria-labelledby='radioGroup'
        value={value}
        onChange={(v: string) => setValue(v)}
        size={props.size}
        disabled={props.disabled}
        theme={props.theme}
      >
        <Text id='radioGroup' size={200}>
          Select dog breed
        </Text>
        <Flex mt={2} direction='column'>
          <Radio mb={3} value='1' label='Labrador Retriever' />
          <Radio mb={3} value='2' label='German Shepherd' />
          <Radio mb={3} value='3' label='Beagle' />
        </Flex>
      </RadioGroup>
    </div>
  );
};

export const defaultProps: RadioGroupProps = {
  size: 'm',
  theme: undefined,
  disabled: false,
};

Demo.defaultProps = defaultProps;
export default Demo;

Additional input props

Radio.Value contains a styled div and a hidden input. When you pass props to Radio.Value, a specific set of them is passed to the input props, while all others go to the Radio.Value.RadioMark div.

For more control over the input, you can pass props to Radio.Value.Control.

WARNING

🚨 Radio.Value.RadioMark should always be the next element after Radio.Value.Control in DOM.

import Radio, { RadioGroup } from '@semcore/ui/radio';
import type { RadioGroupProps } from '@semcore/ui/radio';
import React from 'react';

const Demo = (props: RadioGroupProps) => {
  return (
    <RadioGroup
      name='radio'
      aria-label='radiogroup with custom properties'
      size={props.size}
      disabled={props.disabled}
      theme={props.theme}
    >
      <Radio mb={3} value='1'>
        <Radio.Value>
          <Radio.Value.Control data-test-id='TEST_ID' />
          <Radio.Value.RadioMark />
        </Radio.Value>
        <Radio.Text>First value</Radio.Text>
      </Radio>
      <Radio mb={3} value='2' label='Second value' />
    </RadioGroup>
  );
};
export const defaultAdditionalInputProps: RadioGroupProps = {
  size: 'm',
  theme: undefined,
  disabled: false,
};

Demo.defaultProps = defaultAdditionalInputProps;
export default Demo;