Select

Select components are used for collecting user inputs from a list of options.

Select Component revolutionizes the way users interact with dropdown menus, blending intuitive design with advanced usability, offers a seamless, 
user-friendly selection process.

Anatomy

Select Component features a prefix icon for visual representation, a label for context, and a placeholder for hints within the select input, which serves as the trigger for the dropdown list. The component also includes a collapse icon to expand or collapse the select box, where the options are displayed.

anatomy of select component

Properties

The Plus UI Select Component is designed with various properties to enhance its functionality and adaptability across different UI requirements. These properties are categorized into states, status, size and required each affecting how the select component looks and behaves in different scenarios.

States	Status	Size	Required
Default	Default	Small	True
Hovered	Error	Medium	False
Pressed		Large
Filled
Filled hovered
Read-only
Disabled

States

• Default select component is the initial state with no interaction.

• Hovered select component is a change appearance when a user hovers over it with a mouse.

• Pressed select component shows feedback when the user clicks or taps on the component.

• Filled select component indicates an option has been selected.

• Filled hovered select component reflects a hovered state when the component already has a selection.

• Read-only select component is visible but not interactive; users can view the selection but not change it.

• Disabled select component is completely non-interactive, typically grayed out to indicate it is not available for action.

React

import React from 'react';
import { PlusSelect, PlusSelectOption, PlusSelectOptions } from '@plusui/react';

// Empty Select
const EmptySelect = () => (
  <PlusSelect
    label="Select an Option"
    placeholder="Select an option"
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>  {/* Empty state */}
);

// Filled Select
const FilledSelect = () => (
  <PlusSelect
    label="Select an Option"
    placeholder="Select an option"
    value="Option 2"  {/* Pre-selected option */}
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>
);

// Readonly Select
const ReadonlySelect = () => (
  <PlusSelect
    label="Select an Option"
    placeholder="Select an option"
    readonly  {/* Read-only state */}
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>
);

// Disabled Select
const DisabledSelect = () => (
  <PlusSelect
    label="Select an Option"
    placeholder="Select an option"
    disabled  {/* Disabled state */}
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>
);

export default {
  EmptySelect,
  FilledSelect,
  ReadonlySelect,
  DisabledSelect,
};

Angular

<!-- Empty Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Empty state -->

<!-- Filled Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  value="Option 2" 
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

<!-- Readonly Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  readonly 
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

<!-- Disabled Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  disabled  
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

Vue

<template>
  <!-- Empty Select -->
  <plus-select
    label="Select an Option"
    placeholder="Select an option"
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>  <!-- Empty state -->

  <!-- Filled Select -->
  <plus-select
    label="Select an Option"
    placeholder="Select an option"
    value="Option 2"  
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>

  <!-- Readonly Select -->
  <plus-select
    label="Select an Option"
    placeholder="Select an option"
    readonly 
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>

  <!-- Disabled Select -->
  <plus-select
    label="Select an Option"
    placeholder="Select an option"
    disabled  
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>
</template>

Javascript

<!-- Empty Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Empty state -->

<!-- Filled Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  value="Option 2"  <!-- Pre-selected option -->
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

<!-- Readonly Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  readonly  <!-- Read-only state -->
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

<!-- Disabled Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  disabled  <!-- Disabled state -->
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

Status

• Default status select component is the standard look without any validation status.

• Error status select component highlights the component with colors or icons to indicate a problem with the selection, typically used for form validation.

React

import React from 'react';
import { PlusSelect, PlusSelectOption, PlusSelectOptions } from '@plusui/react';

// Default Status Select
const DefaultStatusSelect = () => (
  <PlusSelect
    label="Select an Option"
    placeholder="Select an option"
    caption="This is a default select"
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>  {/* Default status */}
);

// Error Status Select
const ErrorStatusSelect = () => (
  <PlusSelect
    label="Select an Option"
    placeholder="Select an option"
    caption="This select has an error"
    error  {/* Error status */}
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>
);

export default {
  DefaultStatusSelect,
  ErrorStatusSelect,
};

Angular

<!-- Default Status Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  caption="This is a default select"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Default status -->

<!-- Error Status Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  caption="This select has an error"
  error  
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

Vue

<template>
  <!-- Default Status Select -->
  <plus-select
    label="Select an Option"
    placeholder="Select an option"
    caption="This is a default select"
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>  <!-- Default status -->

  <!-- Error Status Select -->
  <plus-select
    label="Select an Option"
    placeholder="Select an option"
    caption="This select has an error"
    error  
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>
</template>

Javascript

<!-- Default Status Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  caption="This is a default select"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Default status -->

<!-- Error Status Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  caption="This select has an error"
  error 
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

Size

• Small Select Component is for limited space or minimalistic layouts.

• Medium Select Component is the standard size, balancing visibility and space efficiency.

• Large Select Component provides larger click areas and more visual prominence, suitable for primary interactions.

React

import React from 'react';
import { PlusSelect, PlusSelectOption, PlusSelectOptions } from '@plusui/react';

// Small Size Select
const SmallSizeSelect = () => (
  <PlusSelect
    size="sm"
    label="Select (Small)"
    placeholder="Select an option"
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>  {/* Small size */}
);

// Medium Size Select
const MediumSizeSelect = () => (
  <PlusSelect
    size="md"
    label="Select (Medium)"
    placeholder="Select an option"
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>  {/* Medium size */}
);

// Large Size Select
const LargeSizeSelect = () => (
  <PlusSelect
    size="lg"
    label="Select (Large)"
    placeholder="Select an option"
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>  {/* Large size */}
);

export default {
  SmallSizeSelect,
  MediumSizeSelect,
  LargeSizeSelect,
};

Angular

<!-- Small Size Select -->
<plus-select
  size="sm"
  label="Select (Small)"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Small size -->

<!-- Medium Size Select -->
<plus-select
  size="md"
  label="Select (Medium)"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Medium size -->

<!-- Large Size Select -->
<plus-select
  size="lg"
  label="Select (Large)"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Large size -->

Vue

<template>
  <!-- Small Size Select -->
  <plus-select
    size="sm"
    label="Select (Small)"
    placeholder="Select an option"
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>  <!-- Small size -->

  <!-- Medium Size Select -->
  <plus-select
    size="md"
    label="Select (Medium)"
    placeholder="Select an option"
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>  <!-- Medium size -->

  <!-- Large Size Select -->
  <plus-select
    size="lg"
    label="Select (Large)"
    placeholder="Select an option"
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>  <!-- Large size -->
</template>

Javascript

<!-- Small Size Select -->
<plus-select
  size="sm"
  label="Select (Small)"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Small size -->

<!-- Medium Size Select -->
<plus-select
  size="md"
  label="Select (Medium)"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Medium size -->

<!-- Large Size Select -->
<plus-select
  size="lg"
  label="Select (Large)"
  placeholder="Select an option"
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>  <!-- Large size -->

Required

The Required property makes a selection mandatory in the Plus UI Select Component, preventing form submission until an option is chosen. Essential for forms needing specific user input, it ensures no selection is missed, often highlighted with visual indicators for users.

React

import React from 'react';
import { PlusSelect, PlusSelectOption, PlusSelectOptions } from '@plusui/react';

// Required Select
const RequiredSelect = () => (
  <PlusSelect
    label="Select an Option"
    placeholder="Select an option"
    caption="This field is required"
    required  {/* Required state */}
  >
    <PlusSelectOptions>
      <PlusSelectOption>Option 1</PlusSelectOption>
      <PlusSelectOption>Option 2</PlusSelectOption>
      <PlusSelectOption>Option 3</PlusSelectOption>
    </PlusSelectOptions>
  </PlusSelect>
);

export default RequiredSelect;

Angular

<!-- Required Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  caption="This field is required"
  required 
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

Vue

<template>
  <!-- Required Select -->
  <plus-select
    label="Select an Option"
    placeholder="Select an option"
    caption="This field is required"
    required  
  >
    <plus-select-options>
      <plus-select-option>Option 1</plus-select-option>
      <plus-select-option>Option 2</plus-select-option>
      <plus-select-option>Option 3</plus-select-option>
    </plus-select-options>
  </plus-select>
</template>

Javascript

<!-- Required Select -->
<plus-select
  label="Select an Option"
  placeholder="Select an option"
  caption="This field is required"
  required 
>
  <plus-select-options>
    <plus-select-option>Option 1</plus-select-option>
    <plus-select-option>Option 2</plus-select-option>
    <plus-select-option>Option 3</plus-select-option>
  </plus-select-options>
</plus-select>

Layout & Spacing

Layout and spacing within the Select Component are crafted to ensure optimal readability and ease of interaction. Adequate spacing between options prevents accidental selections, while the layout is designed to be responsive, adapting to different screen sizes and resolutions. The dropdown's width automatically adjusts to the content size or can be manually set, providing flexibility in various design contexts.

layout & spacing of select component

Light & Dark Mode

It seamlessly supports both light and dark modes, ensuring consistency with your application’s theme. The component automatically detects the system preference or can be toggled manually, adjusting its color scheme to provide the best visibility and reduce eye strain in any lighting condition.

light & dark mode of select component

Accessibility

Accessibility is a cornerstone of the Plus UI Select Component's design, ensuring that everyone, including users with disabilities, can navigate and interact with it efficiently. It adheres to WCAG guidelines, featuring keyboard navigation, screen reader support, and ARIA attributes. These features make the component not only compliant with accessibility standards but also inclusive, offering a user-friendly experience for all users.

Criteria	Description	Status
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	✔️ Passed
Inline Text Spacing	Ensure that text spacing set through style attributes can be adjusted with custom stylesheets	✔️ Passed
IDs of Active Elements	Ensures every id attribute value of active elements is unique	✔️ Passed
ID Attribute Value	Ensures every id attribute value is unique	✔️ Passed
Tabindex Attribute	Ensures tabindex attribute values are not greater than 0	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
size	Sets the size of the select	String	sm, md, lg	md
label	Label text for the select	String	Any valid text	""
caption	Additional caption text	String	Any valid text	""
placeholder	Placeholder text for the select	String	Any valid text	""
required	If true, the select is a required field	Boolean	true, false	false
readonly	If true, the select is read-only	Boolean	true, false	false
disabled	If true, the select is disabled	Boolean	true, false	false
error	If true, the select has an error status	Boolean	true, false	false
value	The current value of the select	String	Any valid string	""
name	Name for form submission	String	Any valid string	""