Radio

Purpose

A component which allows a user to pick a single option from a short list of options.

Usage

To use the radio component, a developer needs to import both RadioGroup and Radio from @wedgekit/radio

import { Radio, RadioGroup } from '@wedgekit/radio';

const Example = () => {
  const [value, setValue] = React.useState('');

  return (
    <RadioGroup
      onChange={(v) => setValue(v)}
      label="Go on, choose one!"
      name="starter"
      value={value}
    >
      <Radio value="charmander" label="Charmander" />
      <Radio value="squirtle" label="Squirtle" />
      <Radio value="bulbasaur" label="Bulbasaur" />
    </RadioGroup>
  );
};

render(<Example />);

Props

Radio

label

Type: String

Required: ✅

A string label to indicate what the radio input is for. Required on all Wedgekit inputs for A11y.

value

Type: string | number

Required: ✅

The value of the radio when used in a group

checked

Type: boolean

Required: ❌

Indicated whether or not the radio is checked

disabled

Type: boolean

Required: ❌

id

Type: string | number

Required: ❌

A unique identifier for the input to both associate the input with its label, as well as provide an identifier on the callback. If not provided, then one will be generated.

labelHidden

Type: boolean

Required: ❌

Boolean for indicating if the label should be visible or not

name

Type: String

Required: ❌

A name to associate that radio with a group

ref

Type: React.Ref

Required: ❌

The ref giving a user access to the underlying HTML button.

status

Type: 'default' | 'error' | 'success' | 'pending'

Required: ❌

Indicates form validation status for styling purposes

tabIndex

Type: number

Required: ❌

Property used to disjoint tabbability

onBlur

Type: (e: React.SyntheticEvent) => void

Required: ❌

Optional callback that is fired on a radio's selection

onChange

Type: (e: React.SyntheticEvent) => void

Required: ❌

Optional callback that is fired on a radio's selection

onFocus

Type: (e: React.SyntheticEvent) => void

Required: ❌

Optional callback that is fired on a radio's selection

RadioGroup

children

Type: React.ReactElement[]

Required: ✅

label

Type: String

Required: ✅

A string label for the radio group

name

Type: String

Required: ✅

A string name for the entire group of radios that allows native radio group behavior

value

Type: string | number

Required: ✅

Value of the selected radio

onChange

Type: (selectedValue: string | number) => void

Required: ✅

className

Type: string

Required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

disabled

Type: boolean

Required: ❌

Optional prop to disabled the entire group

info

Type: { title: string, content?: string, link? { url: string, label: string } }

Required: ❌

Optional information to populate an info popup

labelHidden

Type: boolean

Required: ❌

Boolean for indicating if the label should be visible or not

ref

Type: React.Ref

Required: ❌

The ref giving a user access to the underlying HTML button.

required

Type: boolean

Required: ❌

A boolean denoting whether a selection within the group is required

status

Type: 'default' | 'error' | 'success' | 'pending'

Required: ❌

Indicates form validation status for styling purposes

tabIndex

Type: number

Required: ❌

Property used to disjoint tabbability

onBlur

Type: (e: React.SyntheticEvent) => void

Required: ❌

onFocus

Type: (e: React.SyntheticEvent) => void

Required: ❌