Skip to main content

Components

Select Field

allows users to choose one option from a list of items

banner-Select Field
Square Icon

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Select component to select value from options.

import { Select } from 'legion-ui';

Variant

Legion have seven variant of selectfield

Basic Select

Select...
<div style="padding:2rem; background-color: #F6F7FC;">
  <Select
    options={[
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' },
    ]}
  />
</div>

Disabled

Select...
<div style="padding:2rem; background-color: #F6F7FC;">
  <Select
    options={[
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' },
    ]}
    isDisabled
  />

Icon

Select...
<Select
  options={[
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ]}
  iconLeft={<DynamicIcon name="Search" />}
/>

Label and Caption

Pilih Menu
Menu
Minimal pilih satu variant
<Select
  options={[
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ]}
  label="Pilih Menu"
  placeholder="Menu"
  caption="Minimal pilih satu variant"

Multi Select

Support multiple selected options

Pilih Menu
Menu
Minimal pilih satu variant
<Select
  options={[
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ]}
  label="Pilih Menu"
  placeholder="Menu"
  caption="Minimal pilih satu variant"

Show Select Option

Hide the selected option from the menu

Pilih Menu
Menu
Minimal pilih satu variant
<Select
  options={[
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ]}
  label="Pilih Menu"
  placeholder="Menu"
  caption="Minimal pilih satu variant"

Open Menu OnSelect

Close the select menu when the user selects an option

Pilih Menu
Menu
Minimal pilih satu variant
<Select
  options={[
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ]}
  label="Pilih Menu"
  placeholder="Menu"
  caption="Minimal pilih satu variant"

Attribute

Size

Large
Select...

Medium
Select...

Small
Select...
//large
 <Select
        options={[
            { value: 'chocolate', label: 'Chocolate' },
            { value: 'strawberry', label: 'Strawberry' },
            { value: 'vanilla', label: 'Vanilla' }
        ]}
        size="lg"
        label="Large"

Props

propertypropTyperequireddefaultdescription
optionArray-trueArray of options that populate the select menu
labelString--Adds helper text above your select element
captionString--Add field caption
captionIconReact.ReactNode--Add icon to the caption
variantnormal | success | error--Change the state and outline of the select
hideSelectedOptionsboolean-trueHide the selected option from the menu
closeMenuOnSelectboolean-trueClose the select menu when the user selects an option
isMultiboolean-falseSupport multiple selected options
isDisabledboolean-falseWhether the select is disabled.