Agnostic

Select

The Select component is a wrapper around the native <select> element with refinements made to its initial appearance. Select is best to use if when there are 4 or more options.

Examples

Select

Customize the first option's text copy

Pass defaultOptionLabel to specify the text copy to use for the first option

Disabled select

Small select

Large select

Multiple select size 4

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import { Select } from "agnostic-react";
export const YourComponent = () => (
  <>
    <h2 class="mbs32">Select</h2>
    <div class="mbs12 mbe16">
      <Select
        options={[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]}
        uniqueId="sel1"
        name="select1"
        labelCopy="Select the best tennis player of all time"
      />
    </div>
    <h2>Customize the first option's text copy</h2>
    <div class="mbe16">
      <p className="mbe24">
        Pass <code>defaultOptionLabel</code> to specify the text copy to use for the first option
      </p>
      <Select
        defaultOptionLabel="Select your favorite tennis player"
        options={[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]}
        uniqueId="sel1b"
        name="select1b"
        labelCopy="Select the best tennis player of all time"
      />
    </div>
    <h2>Disabled select</h2>
    <div class="mbs12 mbe16">
      <Select
        isDisabled
        options={[{ value: 'andre', label: 'Andre Agassi' }]}
        uniqueId="sel2"
        name="select2"
        labelCopy="Select -- example disabled"
      />
    </div>
    <h2>Small select</h2>
    <div class="mbs12 mbe16">
      <Select
        size="small"
        options={[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]}
        uniqueId="sel3"
        name="select3"
        labelCopy="Select the best tennis player of all time"
      />
    </div>
    <h2>Large select</h2>
    <div class="mbs12 mbe16">
      <Select
        size="large"
        options={[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]}
        uniqueId="sel4"
        name="select4"
        labelCopy="Select the best tennis player of all time"
      />
    </div>
    <h2>Multiple select size 4</h2>
    <div class="mbs12 mbe16">
      <Select
        isMultiple={true}
        multipleSize="4"
        options={[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]}
        uniqueId="sel4"
        name="select4"
        labelCopy="Select the best tennis player of all time"
      />
    </div>
  </>
)

React: component source, storybook tests

Vue 3 logoVue 3

View source
<script setup>
// Import AgnosticUI global common & component CSS
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Select } from "agnostic-vue";
</script>
<template>
  <h2>Select</h2>
  <div class="mbs12 mbe16">
    <Select
      :options="[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]"
      unique-id="sel1"
      name="select1"
      label-copy="Select the best tennis player of all time"
    />
  </div>
  <h2>Customize the first option's text copy</h2>
  <div class="mbe16">
    <p className="mbe24">
      Pass <code>default-option-label</code> to specify the text copy to use for the first option
    </p>
    <Select
      default-option-label="Select your favorite tennis player"
      :options="[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]"
      unique-id="sel1b"
      name="select1b"
      label-copy="Select the best tennis player of all time"
    />
  </div>
  <h2>Disabled select</h2>
  <div class="mbs12 mbe16">
    <Select
      is-disabled
      :options="[{ value: 'andre', label: 'Andre Agassi' }]"
      unique-id="sel2"
      name="select2"
      label-copy="Select -- example disabled"
    />
  </div>
  <h2>Small select</h2>
  <div class="mbs12 mbe16">
    <Select
      size="small"
      :options="[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]"
      unique-id="sel3"
      name="select3"
      label-copy="Select the best tennis player of all time"
    />
  </div>
  <h2>Large select</h2>
  <div class="mbs12 mbe16">
    <Select
      size="large"
      :options="[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]"
      unique-id="sel4"
      name="select4"
      label-copy="Select the best tennis player of all time"
    />
  </div>
  <h2>Multiple select size 4</h2>
  <div class="mbs12 mbe16">
    <Select
      :is-multiple="true"
      :multiple-size="4"
      :options="[{ value: 'andre', label: 'Andre Agassi' }, { value: 'serena', label: 'Serena Williams'} , { value: 'mac', label: 'John McEnroe'}, { value: 'borg', label: 'Bjorn Borg'}, { value: 'althea', label: 'Althea Gibson'}, { value: 'roger', label: 'Roger Federer'}]"
      unique-id="sel4"
      name="select4"
      label-copy="Select the best tennis player of all time"
    />
  </div>
</template>

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
<script>
  import 'agnostic-svelte/css/common.min.css';
  import { Select } from "agnostic-svelte";
  let selectedValue;
  let multiSelectValue;
</script>
<section class="component-container">
  <h2>Select default</h2>
  <div class="mbe16"><code>bind:selected</code> test: {selectedValue}</div>
  <Select
    bind:selected={selectedValue}
    on:selected={(e) => console.log('selected e.detail', e.detail)}
    uniqueId="sel1"
    name="select1"
    labelCopy="Select the best tennis player of all time"
    options={tennisOptions}
  />
  <h2>Select default option customized</h2>
  <Select
    uniqueId="sel2"
    on:selected={(e) => console.log('selected e.detail', e.detail)}
    name="select2"
    labelCopy="Select the best tennis player of all time"
    defaultOptionLabel="Select your favorite tennis player of all-time"
    options={tennisOptions}
  />
  <h2>Select disabled</h2>
  <Select
    uniqueId="sel3"
    on:selected={(e) => console.log('selected e.detail', e.detail)}
    name="select3"
    isDisabled={true}
    labelCopy="Select the best tennis player of all time"
    defaultOptionLabel="Select your favorite tennis player of all-time"
    options={tennisOptions}
  />
  <h2>Select small</h2>
  <Select
    uniqueId="sel3"
    on:selected={(e) => console.log('selected e.detail', e.detail)}
    name="select3"
    size="small"
    labelCopy="Select the best tennis player of all time"
    defaultOptionLabel="Select your favorite tennis player of all-time"
    options={tennisOptions}
  />
  <h2>Select large</h2>
  <Select
    uniqueId="sel3"
    on:selected={(e) => console.log('selected e.detail', e.detail)}
    name="select3"
    size="large"
    labelCopy="Select the best tennis player of all time"
    defaultOptionLabel="Select your favorite tennis player of all-time"
    options={tennisOptions}
  />
  <h2 class="mbs12 mbe16">Multiple select size 4</h2>
  <div class="mbe16"><code>bind:multiSelected</code> test: {multiSelectValue}</div>
  <Select
    bind:multiSelected={multiSelectValue}
    isMultiple
    multipleSize={4}
    options={tennisOptions}
    on:selected={(e) => {
      console.log('Multi select: ', e.detail);
    }}
    uniqueId="sel6"
    name="select6"
    labelCopy="Select the best tennis player of all time"
  />
</section>

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



 





 





import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `<section>
    <h2>Select</h2>
    <ag-select uniqueId="sel1"
              name="select1"
              labelCopy="Select the best tennis player of all time"
              [options]="[
      { value: 'andre', label: 'Andre Agassi' },
      { value: 'serena', label: 'Serena Williams' },
      { value: 'mac', label: 'John McEnroe' },
      { value: 'borg', label: 'Bjorn Borg' },
      { value: 'althea', label: 'Althea Gibson' },
      { value: 'roger', label: 'Roger Federer' },
      ]"></ag-select>
  </section>
  <section>
    <h2>Select first option custom label</h2>
    <ag-select uniqueId="sel2"
              name="select2"
              defaultOptionLabel="Select your favorite tennis player"
              labelCopy="Select the best tennis player of all time"
              [options]="[
      { value: 'andre', label: 'Andre Agassi' },
      { value: 'serena', label: 'Serena Williams' },
      { value: 'mac', label: 'John McEnroe' },
      { value: 'borg', label: 'Bjorn Borg' },
      { value: 'althea', label: 'Althea Gibson' },
      { value: 'roger', label: 'Roger Federer' },
      ]"></ag-select>
  </section>
  <section>
    <h2>Select disabled</h2>
    <ag-select uniqueId="sel3"
              name="select3"
              [isDisabled]="true"
              defaultOptionLabel="Select your favorite tennis player"
              labelCopy="Select the best tennis player of all time"
              [options]="[
      { value: 'andre', label: 'Andre Agassi' }
      ]"></ag-select>
  </section>
  <section>
    <h2>Select small</h2>
    <ag-select uniqueId="sel4"
              name="select4"
              size="small"
              defaultOptionLabel="Select your favorite tennis player"
              labelCopy="Select the best tennis player of all time"
              [options]="[
              { value: 'andre', label: 'Andre Agassi' },
              { value: 'serena', label: 'Serena Williams' },
              { value: 'mac', label: 'John McEnroe' },
              { value: 'borg', label: 'Bjorn Borg' },
              { value: 'althea', label: 'Althea Gibson' },
              { value: 'roger', label: 'Roger Federer' },
              ]"></ag-select>
  </section>
  <section>
    <h2>Select large</h2>
    <ag-select uniqueId="sel5"
              name="select5"
              size="large"
              defaultOptionLabel="Select your favorite tennis player"
              labelCopy="Select the best tennis player of all time"
              [options]="[
              { value: 'andre', label: 'Andre Agassi' },
              { value: 'serena', label: 'Serena Williams' },
              { value: 'mac', label: 'John McEnroe' },
              { value: 'borg', label: 'Bjorn Borg' },
              { value: 'althea', label: 'Althea Gibson' },
              { value: 'roger', label: 'Roger Federer' },
              ]"></ag-select>
  </section>
  <section>
    <h2>Select multiple</h2>
    <ag-select uniqueId="sel6"
              name="select6"
              size="large"
              [isMultiple]="true"
              [multipleSize]="4"
              defaultOptionLabel="Select your favorite tennis player"
              labelCopy="Select the best tennis player of all time"
              [options]="[
              { value: 'andre', label: 'Andre Agassi' },
              { value: 'serena', label: 'Serena Williams' },
              { value: 'mac', label: 'John McEnroe' },
              { value: 'borg', label: 'Bjorn Borg' },
              { value: 'althea', label: 'Althea Gibson' },
              { value: 'roger', label: 'Roger Federer' },
              ]">
    </ag-select>
  </section>
  `
})
export class YourComponent {}

Angular: component source, storybook tests

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.