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


import { Select, SelectField } from 'bumbag'



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.

#Default values

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




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


Make the select field disabled with the disabled prop.



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


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




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


#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!



  • 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.


#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

name string

Name of the input field

options Required

  label: string;
  value: any;
  disabled?: boolean;


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

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

placeholder string

Hint text to display


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


Copyright © 2020 Jake Moxey