@elemental-ui-alpha/select-field v0.0.2

Select Field

import { SelectField, SelectInput } from '@elemental-ui-alpha/text-field';

SelectField

The SelectField component is the recommended component to use, which connects the label, description, and message to the input element.

Label

Each text field must be accompanied by a label.

<SelectField label="Framework" placeholder="Please select">
  <option value="1">React</option>
  <option value="2">Vue</option>
  <option value="3">Svelte</option>
</SelectField>

Description

Labels should be concise. If you need to provide extra information to describe the field, use the description property.

<SelectField
  label="Framework"
  description="Each framework has benefits and caveats, choose wisely"
  placeholder="Please select"
>
  <option value="1">React</option>
  <option value="2">Vue</option>
  <option value="3">Svelte</option>
</SelectField>

Message

Offer a message to the user that may aid input.

<SelectField
  label="Framework"
  message="Sorry, no Angular"
  placeholder="Please select"
>
  <option value="1">React</option>
  <option value="2">Vue</option>
  <option value="3">Svelte</option>
</SelectField>

SelectInput

The SelectInput component is just a styled select element.

<SelectInput placeholder="Please select">
  <option value="1">React</option>
  <option value="2">Vue</option>
  <option value="3">Svelte</option>
</SelectInput>