Select: React

Select gives users the ability to select a single item from a list of 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 { Select } from '@mediahuis/chameleon-react';

export default function Example() {
  return (
    <Select>
      <option value="1">Example 1</option>
      <option value="2">Example 2</option>
    </Select>
  );
}

Properties

Property	Type	Default	Required	Description
action	ReactNode	-	No	Contents displayed within the ActionLabel.
children	ReactNode	-	No	The content displayed within the Select component.
className	String	-	No	Allows extending the class names of the component.
disabled	Boolean	-	No	Specifies whether the component is disabled or not, same as the HTML attribute.
error	Boolean	-	No	Determines whether the select is visually displayed with an error state. This adds necessary accessibility tags.
iconLeft	SVGType	-	No	The icon displayed on the left side of the select.
id	String	-	Yes	The unique HTML id attribute that also affects the associated label and message ids for accessibility reasons.
label	ReactNode	-	Yes	Contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	No	Determines whether the label is visually hidden (while still required for accessibility).
message	String	-	No	Contents displayed beneath the label.
name	String	-	No	Name attribute of the HTML element.
onBlur	FocusEventHandler	-	No	Function fired when the Select loses focus.
onChange	ChangeEventHandler	-	No	Native change event, triggered when the Select value changes. Validation can be done using `event.target.value`.
onClick	MouseEventHandler	-	No	The event handler that is triggered when the Select is clicked.
onFocus	FocusEventHandler	-	No	The event handler that is triggered when the Select receives focus.
optionalLabel	String	-	No	Contents displayed within the OptionalLabel.
placeholder	String	-	No	The placeholder text displayed as the first option, which is disabled.
required	Boolean	-	No	Specifies whether the Select is required (sets the native select required attribute).
success	Boolean	-	No	Determines whether the Select displays a success state.
value	String	-	No	The current value of the Select.

iconLeft

The iconLeft property lets you choose an icon from the icon package to be displayed on the left. The complete list of possible icons can be found in the Icons documentation.

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
  • iconLeft
  • required