#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

#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

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
  }; ... 796 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