8x8 Oxygen - Radio

Installation

$ yarn add @8x8/oxygen-radio

$ npm install @8x8/oxygen-radio

Usage

import Radio, { RadioGroup } from '@8x8/oxygen-radio';

<Radio name="value0name" value="value0" label="Example Label" isChecked />

RadioGroup using fieldset and legend

It is recommended to use native HTML elements fieldset and legend as it is a more robust solution.

<RadioGroup value="value1">
  // RadioGroup is a fieldset HTML element // add a legend here in order to name
  the Radio group // which aids people using Assistive Technology // by
  announcing the group name on Radio focus
  <legend>Checkbox group title</legend>
  <Radio label="Example label 0" value="value0" name="value0name" />
  <Radio label="Example label 1" value="value1" name="value1name" />
  // As the component is not handling long words(strings without spaces)
  overflow, these should be sent as a custom component and then handled
  correspondingly
  <Radio
    label={<span>Looooooooooooooooooooooooooong label</span>}
    value="value2"
    name="valu2name"
  />
</RadioGroup>

RadioGroup using heading, and aria-labelledby

If you do NOT or cannot use the above fieldset and legend pattern you can set the RadioGroup as=div and use the role=radiogroup and aria-labelledby pattern

<h3 id="radio-group-title">Checkbox group title</h3>
<RadioGroup as="div" role="radiogroup" aria-labelledby="radio-group-title" value="value1">
  <Radio label="Example label 0" value="value0" name="value0name" />
  <Radio label="Example label 1" value="value1" name="value1name" />
  // As the component is not handling long words(strings without spaces) overflow, these should be sent as a custom
  component and then handled correspondingly
  <Radio label={<span>Looooooooooooooooooooooooooong label</span>} value="value2" name="valu2name" />
</RadioGroup>

Props

Radio

| Name | Type | Default | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------- | | theme | Partial<RadioTheme> | | Overrides applied on top of the light or dark settings resolved by OxygenProvider | | testId | string | 'RADIO' | Radio test id | | label | node | '' | Specifies the label content for the radio input | | value | oneOfType([ number, string, bool, shape({ id: string.isRequired, })]) | '' | Radio input value (used to match with the selected value of the group) | | name | string | undefined | Specifies the name prop for the radio input | | infoBoxText | node | undefined | Shows info icon and renders text inside Tooltip | | infoBoxButtonLabel | string | undefined | Adds accessible aria-label to info button | | isChecked | bool | false | Specifies if the input is checked | | isDisabled | bool | false | Disabled state of the radio input | | onChange | func | noop | Callback for the radio input |

RadioGroup

| Name | Type | Default | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------- | | children | oneOfType([array, node]) | null | Radio inputs to be rendered | | isHorizontal | bool | false | Specifies if the group should be displayed horizontally or vertically | | name | string | '' | Name prop to be passed to the radio inputs | | onChange | func | noop | Callback function to be passed to the radio inputs | | theme | Partial<RadioGroupTheme> | | Overrides applied on top of the light or dark settings resolved by OxygenProvider | | value | oneOfType([ number, string, bool, shape({ id: string.isRequired, }),]) | '' | Specifies the selected value from the radio group |