Radio: React

An accordion component is a list of items, allowing each item’s content to be expanded and collapsed by clicking its header.

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 { Radio } from '@mediahuis/chameleon-react';

export default function Example() {
  return <Radio label="Example" />;
}

Properties

Property	Type	Default	Required	Description
action	ReactNode	-	No	Contents displayed within the ActionLabel.
checked	Boolean	-	No	Specifies whether the radio button is checked.
className	String	-	No	Allows extending the class names of the Radio component.
disabled	Boolean	-	No	Specifies whether the radio button is disabled.
error	Boolean	-	No	Specifies whether the radio button is displayed with an error state. This adds necessary accessibility tags.
id	String	-	Yes	The unique HTML id attribute for the radio button. It is also used for associating the label and message components for accessibility.
label	ReactNode	-	No	Contents displayed within the PrimaryLabel, which serves as the main label for the radio button.
labelId	String	`${id}-label`	No	The unique HTML id attribute. It is used for associating the label and the radio components for accessibility.
labelHidden	Boolean	-	No	Specifies whether the label for the radio button is visually hidden, while still being required for accessibility.
labelPlacement	'left' | 'right'	-	No	Determines the placement of the label relative to the radio button.
labelProps	GenericComponentPropsWithoutAs	-	No	Additional props to be passed to the label component.
message	ReactNode	-	No	Contents displayed beneath the label, providing additional information or instructions.
onChange	ChangeEventHandler	-	No	Event handler function called when the radio button's checked state changes.
optionalLabel	String	-	No	Contents displayed within the OptionalLabel, which represents optional information or instructions related to the radio button.
required	Boolean	-	No	Specifies whether the radio button is required.
value	String	-	No	The value associated with the radio button.
inputProps	React.HTMLProps	-	No	Object containing additional props passed to the input component.

required

Chameleon form inputs are required by default, with the required attribute automatically set. To mark a field as optional, pass the optionalLabel prop to remove the required attribute.

• Installation
• Properties
  • required