@highlight-ui/radio-button

@highlight-ui/radio-button

A control that allows the user to toggle between checked and unchecked states. Used to pick one option from a set of multiple available options. If you require a multi-selection input, please use the Checkbox.

Features

• RadioButton
  • Controlled component
  • Optional label to display next to the RadioButton input
  • Optional sub-label to display under the main label
  • Optional tooltip placed next to the main input label
• RadioButtonGroup
  • Renders multiple RadioButtons given array of options
  • Controlled component
  • Vertical or horizontal display
  • Optional name to apply to all RadioButtons within the group

Installation

Using npm:

npm install @highlight-ui/radio-button

Using yarn:

yarn add @highlight-ui/radio-button

Using pnpm:

pnpm install @highlight-ui/radio-button

In your (S)CSS file:

@import url('@highlight-ui/radio-button');

Once the package is installed, you can import the library:

import { RadioButton, RadioButtonGroup } from '@highlight-ui/radio-button';

Usage

RadioButton

import React, { useState } from 'react';
import { RadioButton } from '@highlight-ui/radio-button';

export default function RadioButtonExample() {
  const [checkedStatus, setCheckedStatus] = useState(false);

  return (
    <RadioButton
      id="radio-button"
      label="Click me to toggle me"
      subLabel="I am only a radio button input"
      checked={checkedStatus}
      onClick={() => setCheckedStatus(!checkedStatus)}
    />
  );
}

RadioButtonGroup

import React, { useState } from 'react';
import { RadioButtonGroup } from '@highlight-ui/radio-button';

export default function RadioButtonGroupExample() {
  const [checked, setChecked] = useState<string | number | undefined>(
    undefined,
  );
  const options = [
    { value: 'option-a', label: 'Option A', subLabel: 'Most important' },
    { value: 'option-b', label: 'Option B', subLabel: 'Average' },
    { value: 'option-c', label: 'Option C', subLabel: 'Lowest priority' },
  ];

  return (
    <RadioButtonGroup
      name="RadioButton-group"
      orientation="horizontal"
      options={options}
      value={checked}
      onChange={(option) => setChecked(option.value)}
    />
  );
}

Props 📜

RadioButton

All HTMLInputElement and [PropsWithMetadata(https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/utils/commons/src/types.ts#L24)] props are accepted with this component. In addition to these, this component has the following props

Prop	Type	Required	Default	Description
label	string	No	null	Text displayed next to the radio button input
subLabel	string	No	null	Text displayed below the main label
tooltipContent	React.ReactNode	No	null	The content of the tooltip pop-out. When supplied, a tooltip will be placed next to the label. This maps to the TooltipProps['content'] prop types.
tooltipMouseOutDelay	'none', 'medium', 'long', or number	No	null	Specifies how to to keep the tooltip opened after the mouse has left the tooltip icon. This maps to the TooltipProps['mouseOutDelay'] prop types.
tone	default or error	No	default	Sets the tone of the radio button

RadioButtonGroup

Note that the RadioButtonGroupOption type matches the RadioButton listed properties above.

Prop	Type	Required	Default	Description
value	RadioButtonGroupOption['value']	Yes		Currently checked value
onChange	function(option: RadioButtonGroupOption): void	Yes		Function called when the checked status of an option changes
orientation	vertical or horizontal	No	vertical	Display of the radio button group
options	RadioButtonGroupOption[]	Yes		Options to render as a group

Accessibility ♿️

Following base accesibility guidelines, the radio-button input currently:

• Allows clicking radio button input and main label to check or uncheck
• Associates the radio button input with its label through the for prop referring to the id

Potential future improvements to make it more accessible:

• Adding focus on the whole radio button and label container
• Including aria tags to indicate checked and disabled states
• Tooltip accessibility will be addressed in a future release as it is currently not adequate

Testing

There are a number of unit tests covering the RadioButton and RadioButtonGroup components, the snippets below can serve as a base to expand future testing if new behaviours are added.

The relevant render methods provide the option to add or override prop values.

RadioButton

import React from 'react';
import { render } from '@testing-library/react';
import { RadioButton, RadioButtonProps } from '@highlight-ui/radio-button';

type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
type RadioButtonWrapperProps = Optional<
  RadioButtonProps,
  'checked' | 'onClick'
>;

function RadioButtonWrapper(props: RadioButtonWrapperProps) {
  const [checked, setChecked] = useState(false);

  return (
    <RadioButton
      checked={checked}
      onClick={() => setChecked(!checked)}
      {...props}
    />
  );
}

describe('RadioButtonTest', () => {
  const renderRadioButtonWrapper = (props: RadioButtonWrapperProps) => {
    return render(<RadioButtonWrapper {...props} />);
  };

  it('test description', () => {
    renderRadioButtonWrapper({});
    // write your expect here
  });
});

RadioButtonGroup

import React from 'react';
import { render } from '@testing-library/react';

import { RadioButtonGroup, RadioButtonGroupProps, RadioButtonGroupOption }  from '@highlight-ui/radio-button';

type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
type RadioButtonGroupWrapperProps = Optional<
  RadioButtonGroupProps,
  'value' | 'onChange' | 'options'
>;

function RadioButtonGroupWrapper(props: RadioButtonGroupWrapperProps) {
  const [checked, setChecked] = useState<string | number | undefined>(
    undefined,
  );
  const options = [
    { value: 'option-a', label: 'Option A', subLabel: 'Most important' },
    { value: 'option-b', label: 'Option B', subLabel: 'Average' },
    { value: 'option-c', label: 'Option C', subLabel: 'Lowest priority' },
  ];

  return (
    <RadioButtonGroup
      name="RadioButton-group"
      options={options}
      value={checked}
      onChange={(option) => setChecked(option.value)}
      {...props}
    />
  );
}

describe('RadioButtonGroupTest', () => {
  const renderRadioButtonGroupWrapper = (props: RadioButtonGroupWrapperProps) => {
    return render(<RadioButtonWrapper {...props} />);
  };

  it('test description', () => {
    renderRadioButtonGroupWrapper({});
    // write your expect here
  });
};

Place in design system 💻

The radio button and radio button group are components currently unused in other components and packages.

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.