Select

Allow users to select an option from a long list. This component uses the base structure of the Input component.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

SelectOption 1Option 2

React

<Select id="select" label="Select">
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>`

CSS

<div class="input select">
  <label for="select" class="input_label">Select</label>
  <select name="select" id="select" class="input_control">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

Usage

To follow user-centred design and GDPR best practices, we should only ask users for information we need. In that respect, all form fields of the Pallote component library are by default required.

For the CSS library, you do not need to add the required property to the form fields, it is added automatically with the javascript import.

Props

isFocused

Focus on a input on page load.

IsFocusedOption 1Option 2

React

<Select id="focused" label="IsFocused" isFocused>
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

CSS

<div class="input input-focused select">
  <label for="focused" class="input_label">Focused</label>
  <select name="focused" id="focused" class="input_control">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

Error

Notify users that the field has an error.

ErrorOption 1Option 2

React

<Select id="error" label="Error" error="This is the error message">
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

CSS

<div class="input input-error select">
  <label for="error" class="input_label">Error</label>
  <p class="input_error">This is the error message</p>
  <select name="error" id="error" class="input_control">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

Disabled

Add this class to signal users the field is disabled.

DisabledOption 1Option 2

React

<Select id="disabled" label="Disabled" disabled>
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

CSS

<div class="input input-disabled select">
  <label for="disabled" class="input_label">Disabled</label>
  <select name="disabled" id="disabled" class="input_control">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

Optional

OptionalOption 1Option 2

React

<Select id="optional" label="Optional" optional>
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

CSS

<div class="input input-optional select">
  <label for="optional" class="input_label">Optional</label>
  <select name="optional" id="optional" class="input_control">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

Hint

Hint

This is a hint to give more details

Option 1Option 2

React

<Select id="hint" label="Hint" hint="This is a hint to give more details">
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

CSS

<div class="input select">
  <label for="hint" class="input_label">Hint</label>
  <p class="input_hint">This is a hint to give more details</p>
  <select name="hint" id="hint" class="input_control">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

Dense

Reduce the font size and padding for a more compact appearance.

DenseOption 1Option 2

React

<Select id="dense" label="Dense" dense>
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

CSS

<div class="input input-dense select">
  <label for="dense" class="input_label">Dense</label>
  <select name="dense" id="dense" class="input_control">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>

HideLabel

Hide the label visually while keeping it accessible to screen readers.

Hidden LabelSelect an optionOption 1Option 2

React

<Select id="hideLabel" label="Hidden Label" hideLabel>
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

CSS

<div class="input select">
  <label for="hideLabel" class="input_label sr-only">Hidden Label</label>
  <select name="hideLabel" id="hideLabel" class="input_control">
    <option value="">Select an option</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
  </select>
</div>