components

Choice (code)

A visual alternative to radio buttons and checkboxes. They allow a selection of single or multiple options from a set of predefined options.

code

design

Choose 1

Choose 2

Choose 3

import { Choice } from '@mediahuis/chameleon-react'

() => {
  const [checked, setChecked] = React.useState('3');

  return (
    <div>
      <Box p={2}>
        <Choice
          value="1"
          name="choice"
          title="Choose 1"
          checked={checked === '1'}
          onChange={({ target }) => setChecked(target.value)}
        />
      </Box>
      <Box p={2}>
        <Choice
          value="2"
          name="choice"
          title="Choose 2"
          checked={checked === '2'}
          onChange={({ target }) => setChecked(target.value)}
        />
      </Box>
      <Box p={2}>
        <Choice
          value="3"
          name="choice"
          title="Choose 3"
          checked={checked === '3'}
          onChange={({ target }) => setChecked(target.value)}
        />
      </Box>
    </div>
  );
};

() => {
  const [checked, setChecked] = React.useState('3');
  return (
    <div>
      <Box p={2}>
        <Choice
          value="1"
          name="choice"
          title="Choose 1"
          checked={checked === '1'}
          onChange={({ target }) => setChecked(target.value)}
        />
      </Box>
      <Box p={2}>
        <Choice
          value="2"
          name="choice"
          title="Choose 2"
          checked={checked === '2'}
          onChange={({ target }) => setChecked(target.value)}
        />
      </Box>
      <Box p={2}>
        <Choice
          value="3"
          name="choice"
          title="Choose 3"
          checked={checked === '3'}
          onChange={({ target }) => setChecked(target.value)}
        />
      </Box>
    </div>
  );
};

Props

Name	Type	Default	Required	Description
checked	Boolean	-	-	Whether the choice is checked or not.
children	Node	-	-	Contents displayed within the choice, when it's selected.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	Visually and functionally disables the choice.
id	String	-	true	The id given to the input, also adds htmlFor to the label.
imageAlt	String	-	-	The alt text of the image.
imageSrc	String	-	-	The source of the image. -> The image must be: width: space-10, height: space10!
info	StringNode	-	-	Info text.
labelProps	Object	-	-	The props for the wrapping label.
message	StringNode	-	-	message text.
name	String	-	true	Native input name.
onChange	Function	-	-	The value of the choice changes. returns native onchange event.
title	StringNode	-	true	Title text.
type	'radio''checkbox'	'radio'	-	Native input type.
value	String	-	true	Native input value.

System Props

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

float

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.

Message

default: undefined

The message is meant as a sort of subtitle.

I've got

message

<Choice value="message" name="message" title="I've got" message="message" />

<Choice value="message" name="message" title="I've got" message="message" />

Children

default: undefined

The content only shown when a specific choice is checked.

I've got children when you check me

Kiekeboo!

Me too

Kiekeboo too!

() => {
  const [checked, setChecked] = React.useState('children1');
  return (
    <div>
      <Box p={2}>
        <Choice
          value="children1"
          name="children"
          title="I've got children when you check me"
          checked={checked === 'children1'}
          onChange={({ target }) => setChecked(target.value)}
        >
          Kiekeboo!
        </Choice>
      </Box>
      <Box p={2}>
        <Choice
          value="children2"
          name="children"
          title="Me too"
          checked={checked === 'children2'}
          onChange={({ target }) => setChecked(target.value)}
        >
          Kiekeboo too!
        </Choice>
      </Box>
    </div>
  );
};

() => {
  const [checked, setChecked] = React.useState('children1');
  return (
    <div>
      <Box p={2}>
        <Choice
          value="children1"
          name="children"
          title="I've got children when you check me"
          checked={checked === 'children1'}
          onChange={({ target }) => setChecked(target.value)}
        >
          Kiekeboo!
        </Choice>
      </Box>
      <Box p={2}>
        <Choice
          value="children2"
          name="children"
          title="Me too"
          checked={checked === 'children2'}
          onChange={({ target }) => setChecked(target.value)}
        >
          Kiekeboo too!
        </Choice>
      </Box>
    </div>
  );
};

Disabled

default: false

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

I am disabled

<Choice value="disabled" name="disabled" title="I am disabled" disabled />

<Choice value="disabled" name="disabled" title="I am disabled" disabled />

Image

default: undefined

Visually provide extra information to the choice by passing an image, please don't forget the alt.

Meow

<Choice
  value="image"
  name="image"
  title="Meow"
  caption="My image needs to be 64px wide, and 64px high."
  imageSrc="http://placekitten.com/64/64"
  imageAlt="A cat."
/>

<Choice
  value="image"
  name="image"
  title="Meow"
  caption="My image needs to be 64px wide, and 64px high."
  imageSrc="http://placekitten.com/64/64"
  imageAlt="A cat."
/>

Info

default: undefined

Provide additional context to the Choice.

info on top

A bit of

<Choice value="1" name="info" title="A bit of" info="info on top" />

<Choice value="1" name="info" title="A bit of" info="info on top" />

Title

default: undefined

What's this Choice all about?

A title is required

<Choice value="title" name="title" title="A title is required" />

<Choice value="title" name="title" title="A title is required" />

Type

default: radio

Switch between radio and checkbox functionallity.

Type can be radio

like in radio

Or checkbox

<Box p={2}>
  <Choice
    value="radio1"
    name="radio"
    title="Type can be radio"
    type="radio"
  />
</Box>
<Box p={2}>
  <Choice
    value="radio2"
    name="radio"
    title="like in radio"
    type="radio"
  />
</Box>
<Box p={2}>
  <Choice
    value="checkbox"
    name="checkbox"
    title="Or checkbox"
    type="checkbox"
  />
</Box>

<Box p={2}>
  <Choice
    value="radio1"
    name="radio"
    title="Type can be radio"
    type="radio"
  />
</Box>
<Box p={2}>
  <Choice
    value="radio2"
    name="radio"
    title="like in radio"
    type="radio"
  />
</Box>
<Box p={2}>
  <Choice
    value="checkbox"
    name="checkbox"
    title="Or checkbox"
    type="checkbox"
  />
</Box>