Choice: React

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

OverviewReactSwiftKotlin

Installation

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

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

export default function Example() {
  return (
    <Choice
      value="1"
      name="choice"
      title="Choose 1"
      onChange={e => {
        console.log(e.target.value);
      }}
    />
  );
}

Properties

Property	Type	Default	Required	Description
checked	Boolean	-	No	Determines whether the choice is checked or not.
children	ReactNode	-	No	The contents displayed within the choice when it's selected.
className	String	-	No	Allows extending the class names of the Choice component.
disabled	Boolean	-	No	Visually and functionally disables the choice.
error	Boolean	-	No	Visually displays the choice with an error state.
id	String	-	Yes	Sets the ID given to the input and adds the `htmlFor` attribute to the label.
imageAlt	String	-	No	The alt text of the image.
imageSrc	String	-	No	The source of the image.
info	ReactNode	-	No	The informational text.
labelProps	GenericComponentPropsWithoutAs	-	No	Is an object containing additional props passed to the label component.
message	ReactNode	-	No	The message text.
name	String	-	Yes	The native input name.
onChange	ChangeEventHandler	-	No	The event handler function triggered when the value of the choice changes. It returns the native `onChange` event.
title	String	-	Yes	The title text.
type	'radio' | 'checkbox' | 'switch'	'radio'	No	The native input type.
value	String	-	Yes	The native input value.

• Installation
• Properties