Select

Select allows users to make a single selection or multiple selections from a list of options.

#Default

Use a select when there are more options than fit as radios.

Assignee

import { Field, Label, Select } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="assignee">Assignee</Label>
  <Select id="assignee" options={REPS} placeholder="Choose a rep" />
</Field>

#Invalid

Use an error message to say what is required.

Queue

Choose who takes this queue.

import { ErrorMessage, Field, Label, Select } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="queue" isRequired>Queue</Label>
  <Select id="queue" options={REPS} placeholder="Choose a rep" isInvalid />
  <ErrorMessage>Choose who takes this queue.</ErrorMessage>
</Field>

#Disabled

Use a disabled select when the choice cannot be changed.

Owner

import { Field, Label, Select } from '@wolf-rayet/react';

<Field>
  <Label htmlFor="owner">Owner</Label>
  <Select id="owner" options={REPS} defaultValue="ava" isDisabled />
</Field>