Returnless UI

Select ​

Select lets users choose one option from an options' menu. Consider select when you have 4 or more options, to void cluttering the interface.

Props
modelValue?:
string | null
Defaults to unknown
disabled?:
boolean
Defaults to false
Whether the input is disabled.
error?:
string | null
Defaults to null
The error to display below the input.
helpText?:
string | null
Defaults to null
The help text to display below the input.
id?:
string | null
Defaults to null
The ID of the input the label is associated with.
label:
string
Defaults to unknown
The label text.
labelHidden?:
boolean
Defaults to false
Whether the label is hidden.
name:
string
Defaults to unknown
The name of the input.
placeholder?:
string | null
Defaults to null
The placeholder text.
readonly?:
boolean
Defaults to false
Whether the input is read-only.
required?:
boolean
Defaults to false
Whether the input is required.
Events
update:modelValue:
[value: string | null]

Usage ​

js
<script lang="ts" setup>
import { Select, SelectGroup, SelectOption } from '@returnless/focus-ui';
</script>

<template>
  <Select label="Select a fruit" placeholder="Select a fruit">
    <SelectOption>Apple</SelectOption>
    <SelectOption>Banana</SelectOption>
    <SelectGroup label="Other fruits">
      <SelectOption>Blueberry</SelectOption>
      <SelectOption>Grapes</SelectOption>
      <SelectOption>Pineapple</SelectOption>
    </SelectGroup>
  </Select>
</template>

Best practices ​

The select component should:

  • Be used for selecting between 4 or more pre-defined options.
  • Have a default option selected whenever possible.
  • Use "Select" as a placeholder option only if there's no logical default option.

Content guidelines ​

Select label ​

Label should:

  • Given a short description (1-3 words) of the requested input.
  • Be written in sentence case (the first word capitalized, the rest lowercase).
  • Avoid punctuation and articles ("the", "an", "a").
  • Be independent sentences. To support internationalization, they should not act as the first part of a sentence that is finished by the component's options.
  • Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.

Select options ​

Options should:

  • Start with "Select" as a placeholder if there isn't a default option.
  • Be listed alphabetically or in another logical order so users can easily find the option they need.
  • Be written sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option.
  • Be clearly labelled based on what the option will do.