components

Radio (code)

Radio enables a user to make a single selection from a group of options.

import { Radio, Fielset, Box } from '@mediahuis/chameleon-react'

() => {
  const values = ['Video', 'Killed', 'The', 'Radio', 'Star'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;

  return (
    <Fieldset label="The Buggles">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="buggles"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

() => {
  const values = ['Video', 'Killed', 'The', 'Radio', 'Star'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;
  return (
    <Fieldset label="The Buggles">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="buggles"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

Props

Name	Type	Default	Required	Description
action	Node	-	-	Contents displayed within the ActionLabel.
checked	Boolean	-	-	Seth the native radio checked state.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	Same as the HTML attribute.
error	Boolean	-	-	Visually displayed as error text. Will add the necessary accessibility tags.
id	String	-	true	Native HTML id attribute. Will also affect the label-id, and the message-id. For accessibility reasons.
label	Node	-	true	Contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	-	Visibly hide the label. (label is still required for a11y)
labelPlacement	'left''right'	-	-	The placement of the label.
labelProps	{ "color": "String" "decoration": "'inherit''none''underline''line-through'" "fontFamily": "'inherit''primary''secondary''system'" "fontWeight": "'inherit''regular''medium''bold'" "size": "'Heading1''Heading2''Heading3''Heading4''Heading5''Heading6''Caption1''Caption2'" "textTransform": "'inherit''none''capitalize''uppercase''lowercase'" }	-	-	Props passed to the label component, the API may change in the future.
message	String	-	-	Contents displayed beneath the label.
onChange	Function	-	-	Native change event, validate on event.target.checked.
optionalLabel	String	-	-	Contents displayed within the OptionalLabel.
required	Boolean	-	-	Sets native input required attribute.
value	String	-	-	Native input value.

System Props

m, mb, ml, mr, mt, mx, my

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Action

default: undefined

Adds an action or extra information to your item, mostly used for links.

LabelLinkText

<Radio
  name="action"
  id="action"
  value="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

<Radio
  name="action"
  id="action"
  value="action"
  label="Label"
  action={<LinkText href="#">LinkText</LinkText>}
/>

Checked

default: undefined

Make a Radio selected by passing the checked prop, only one item with the same name can be checked at a time.

Check!

Check

Out

() => {
  const values = ['Check', 'It', 'Out'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;

  return (
    <Fieldset label="Check!">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="checked"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

() => {
  const values = ['Check', 'It', 'Out'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;
  return (
    <Fieldset label="Check!">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="checked"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

Disabled

default: undefined

Marking a Radio as disabled, will disable all interaction with the element.

Label

<Radio name="disabled" id="disabled" value="disabled" label="Label" disabled />

<Radio name="disabled" id="disabled" value="disabled" label="Label" disabled />

Error

default: undefined

To convey an error to the user, you can set the error prop to true.

Label

<Radio name="error" id="error" value="error" label="Label" error />

<Radio name="error" id="error" value="error" label="Label" error />

LabeHidden

default: undefined

To meet accessibility requirements, every Radio should have an associated label. We do support the ability to visually hide the label when the Radio's purpose is clear.

Label is still required

<Radio
  name="labeHidden"
  id="labelHidden"
  value="hi"
  label="Label is still required"
  labelHidden
/>

<Radio
  name="labeHidden"
  id="labelHidden"
  value="hi"
  label="Label is still required"
  labelHidden
/>

LabelPlacement

default: undefined

The positioning of the label against the Radio itself. The full label will move position (also action, message & optionalLabel).

LabelPlacement

left

undefined

right

() => {
  const values = ['left', undefined, 'right'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;

  return (
    <Fieldset label="LabelPlacement">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="labelPlacement"
            id={`label-${value}`}
            value={`${value}`}
            label={`${value}`}
            checked={isChecked(`${value}`)}
            onChange={e => setCheckedValue(e.target.value)}
            labelPlacement={value}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

() => {
  const values = ['left', undefined, 'right'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;
  return (
    <Fieldset label="LabelPlacement">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="labelPlacement"
            id={`label-${value}`}
            value={`${value}`}
            label={`${value}`}
            checked={isChecked(`${value}`)}
            onChange={e => setCheckedValue(e.target.value)}
            labelPlacement={value}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

LabelProps

default: undefined

You can visually change the label of the Radio. For more info about the possibilities, check the Text component's documentation (Label inherits the Text).

Label

<Radio
  mb={5}
  name="labelProps"
  id="labelProps"
  label="Label"
  labelPlacement="left"
  labelProps={{
    color: 'primaryBase',
    decoration: 'line-through',
    fontFamily: 'primary',
    fontWeight: 'regular',
    size: 'Heading2',
    textTransform: 'capitalize',
  }}
/>

<Radio
  mb={5}
  name="labelProps"
  id="labelProps"
  label="Label"
  labelPlacement="left"
  labelProps={{
    color: 'primaryBase',
    decoration: 'line-through',
    fontFamily: 'primary',
    fontWeight: 'regular',
    size: 'Heading2',
    textTransform: 'capitalize',
  }}
/>

Message

default: undefined

Give additional information to the user.

Label

Message can be set to provide additional information.

<Radio
  name="message"
  id="message"
  value="message"
  label="Label"
  message="Message can be set to provide additional information."
/>

<Radio
  name="message"
  id="message"
  value="message"
  label="Label"
  message="Message can be set to provide additional information."
/>

OptionalLabel

default: undefined

If the optionalLabel is not set, the Radio is required.

Label(I'm optional)

<Radio
  name="optionalLabel"
  id="optionalLabel"
  value="optionalLabel"
  label="Label"
  optionalLabel="I'm optional"
/>

<Radio
  name="optionalLabel"
  id="optionalLabel"
  value="optionalLabel"
  label="Label"
  optionalLabel="I'm optional"
/>

Required

default: true

By default the Radio is required. You can change this by providing an optionalLabel or passing false to the required prop. We encourage you to use the optionalLabel prop, this provides additional feedback to the user!

Label

<Radio
  name="required"
  id="required"
  value="required"
  required={false}
  label="Label"
/>

<Radio
  name="required"
  id="required"
  value="required"
  required={false}
  label="Label"
/>

Value

default: undefined

Use value for controlled Radios.

Value

What

About

Value

() => {
  const values = ['What', 'About', 'Value'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;

  return (
    <Fieldset label="Value">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="checked"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};

() => {
  const values = ['What', 'About', 'Value'];
  const [checkedValue, setCheckedValue] = React.useState(values[0]);
  const isChecked = value => value === checkedValue;
  return (
    <Fieldset label="Value">
      {values.map(value => (
        <Box key={value} mb={5}>
          <Radio
            name="checked"
            id={`label-${value}`}
            value={value}
            label={value}
            checked={isChecked(value)}
            onChange={e => setCheckedValue(e.target.value)}
          />
        </Box>
      ))}
    </Fieldset>
  );
};