Select#

The Select component renders a <select> field with options.

Import#

import { Select, SelectField } from 'bumbag'

Usage#

Editable example

Fields#

You can also use the <SelectField> component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.

It accepts a combination of Select props and FieldWrapper props.

Editable example

Default values#

For uncontrolled select field, set a default value using the defaultValue prop.

Editable example

Labels#

Weather
Editable example

If you want to have the label contained within the bounds of the select field, supply the containLabel prop:

Editable example

Placeholders#

Add a placeholder to a select field with the placeholder prop.

Editable example

Disabled#

Make the select field disabled with the disabled prop.

Editable example

Loading#

Editable example

Sizes#

An input can come in different sizes - small, medium, large, or the default.

Editable example

States#

An input can use different states (as per palette) such as danger, success and warning.

Editable example

Colors#

Weather
Weather
Weather
Weather
Weather
Editable example

Addons#

You can use the Group component to add on stuff to your <Select>.

Editable example

Addons#

Editable example
Editable example

Controlled Usage#

The previous examples are examples of uncontrolled usage. To control the value yourself, use a combination of onChange and value.

Note: Do not use defaultValue with controlled inputs!

Editable example

Accessibility#

Patterns#

  • If an input is required, then aria-required is set to true for the input.
  • If an input is invalid, then aria-invalid is set to true for the input.

Props#

Select Props#

autoFocus boolean

Automatically focus on the input

containLabel boolean

If the label prop is supplied, is it contained inside the select?

defaultValue string

Default value of the input

disabled boolean

Disables the input

isLoading boolean

Adds a cute loading indicator to the input field

isRequired boolean

Makes the input required and sets aria-invalid to true

label string

name string

Name of the input field

options Required

{
  label: string;
  value: any;
  disabled?: boolean;
}[]

size 

"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"

Alters the size of the input. Can be "small", "medium" or "large"

placeholder string

Hint text to display

selectProps 

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 797 more ...;
  onFocus?: (event: FocusEvent<...>) => void;
}

selectRef ((instance: any) => void) | RefObject<any>

state string

State of the input. Can be any color in the palette.

value any

Value of the input

onBlur (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when focus is lost

onChange (event: FormEvent<HTMLInputElement>) => void

Function to invoke when input has changed

onFocus (event: FocusEvent<HTMLInputElement>) => void

Function to invoke when input is focused

Theming#

Select.styles.base
Select.styles.disabled
Select.Wrapper.styles.base
Select.Icon.styles.base
Select.Spinner.styles.base
On this page
Copyright © 2021 Jake Moxey