components

Select (code)

Select gives users the ability to select a single item from a list of options.

About fruit

Jummy!

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

() => {
  const options = ['Bananaaa', 'Lime', 'Coconut', 'Mango'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="fruit"
      value={value}
      placeholder="What's your favourite fruit?"
      onChange={e => setValue(e.target.value)}
      label="About fruit"
      message="Jummy!"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Bananaaa', 'Lime', 'Coconut', 'Mango'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="fruit"
      value={value}
      placeholder="What's your favourite fruit?"
      onChange={e => setValue(e.target.value)}
      label="About fruit"
      message="Jummy!"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Props

Name	Type	Default	Required	Description
action	Node	-	-	Contents displayed within the ActionLabel.
children	Node	-	-	The content displayed withing the select.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	Same as the HTML attribute.
error	Boolean	-	-	Visually displayed as error text. Will add the necessary accessibility tags.
iconLeft	FunctionNodeObject	-	-	The icon on the left (extends Icon), choose one of the icons package.
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)
message	String	-	-	Contents displayed beneath the label.
name	String	-	-	Name attribute of the HTML element.
onBlur	Function	-	-	Fires when the select loses focus.
onChange	Function	-	-	Native change event, validate on event.target.value.
onClick	Function	-	-	Function that is fired when the value of the select changes.
onFocus	Function	-	-	Fires when the select receives focus.
optionalLabel	String	-	-	Contents displayed within the OptionalLabel.
placeholder	String	-	-	First value in options, which is disabled.
required	Boolean	-	-	Sets the native select required attribute.
success	Boolean	-	-	Property to show a success-state on the select
value	String	-	-	Current value of the select.

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

() => {
  const options = ['One', 'two', 'three', 'aaand', 'action'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="action"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      action={<LinkText href="#">LinkText</LinkText>}
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['One', 'two', 'three', 'aaand', 'action'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="action"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      action={<LinkText href="#">LinkText</LinkText>}
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Disabled

default: undefined

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

Label

() => {
  const options = ['Nope', 'not', 'possible'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="disabled"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      disabled
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Nope', 'not', 'possible'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="disabled"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      disabled
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Error

default: undefined

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

Label

() => {
  const options = ['Whoops', "Thath's", 'a', 'fail'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="error"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      error
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Whoops', "Thath's", 'a', 'fail'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="error"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      error
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

IconLeft

default: undefined

For further illustration purposes, you can provide an iconLeft.

Label

() => {
  const options = ['Hot', 'And', 'Trending'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="iconLeft"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      iconLeft={TrendingFill}
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Hot', 'And', 'Trending'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="iconLeft"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      iconLeft={TrendingFill}
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

LabelHidden

default: undefined

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

Label

() => {
  const options = ['Always', 'Add', 'Label'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="labelHidden"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      labelHidden
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Always', 'Add', 'Label'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="labelHidden"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      labelHidden
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Message

default: undefined

Give additional information to the user.

Label

Message can be set to provide additional information.

() => {
  const options = ['A', 'bit', 'more', 'context'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="message"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      message="Message can be set to provide additional information."
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['A', 'bit', 'more', 'context'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="message"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      message="Message can be set to provide additional information."
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

OptionalLabel (Required fields)

default: undefined

By default the Select is always required. To make a Slect optional you can add the optionalLabel prop.

With Chameleon we take a specific approach where we encourage marking optional fields, not required. The majority of fields in a form are always required. Indicating that fields are required make users more fearful, it increases the risk of errors and reduces the form completion rate.

Label(I'm optional)

() => {
  const options = ['Not', 'so', 'required'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="optionalLabel"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      optionalLabel="I'm optional"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Not', 'so', 'required'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="optionalLabel"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      optionalLabel="I'm optional"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Placeholder

default: undefined

Placeholder text is displayed inside the field but is not always necessary. They should be written as examples helping users to understand the required input instead of instructions.

Label

() => {
  const options = ['Nope', 'not', 'a', 'default'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="placeholder"
      value={value}
      placeholder="Make a selection..."
      onChange={e => setValue(e.target.value)}
      label="Label"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Nope', 'not', 'a', 'default'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="placeholder"
      value={value}
      placeholder="Make a selection..."
      onChange={e => setValue(e.target.value)}
      label="Label"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Required

default: true

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

Label

() => {
  const options = ['Secretly', 'not', 'required'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="required"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      required={false}
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Secretly', 'not', 'required'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="required"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
      required={false}
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Value

default: undefined

Use value for controlled Selects.

Label

() => {
  const options = ['Select', 'a', 'value'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="value"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Select', 'a', 'value'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="value"
      value={value}
      onChange={e => setValue(e.target.value)}
      label="Label"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};