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


import { Select, SelectField } from 'bumbag'


Editable example


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


Editable example


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

Editable example


Make the select field disabled with the disabled prop.

Editable example


Editable example


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

Editable example


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

Editable example


Editable example


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

Editable example


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



  • 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

label string

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


On this page
Copyright © 2021 Jake Moxey