OptionButtons#

The OptionButtons component can be used to render a set of Checkbox or Radio option buttons.

Import#

import { OptionButtons, OptionButton } from 'bumbag'

Usage#

Radio group#

To render a set of radio option buttons, set the type prop to "radio".

Desktop
Tablet
Mobile
Editable example

Checkbox group#

To render a set of checkbox option buttons, set the type prop to "checkbox".

Desktop
Tablet
Mobile
Editable example

Field#

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

It accepts a combination of OptionButtons props and FieldWrapper props.

Choose your viewport
Desktop
Tablet
Mobile
Editable example

Disabled#

You can disable the option buttons with the disabled prop. If you only want to disable one option, add the disabled: true attribute to the option.

Desktop
Tablet
Mobile
Editable example
Desktop
Tablet
Mobile
Editable example

Colors#

Desktop
Tablet
Mobile
Editable example

States#

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

Desktop
Tablet
Mobile
Editable example

Sizes#

You can change the size of the option buttons with the size prop.

Desktop
Tablet
Mobile
Desktop
Tablet
Mobile
Desktop
Tablet
Mobile
Desktop
Tablet
Mobile
Editable example

Border radius#

Change the radius of the outer group with the borderRadius prop. It accepts a border radius value.

Desktop
Tablet
Mobile
Editable example

Orientation#

Option buttons can have a vertical orientation by setting the orientation prop to "vertical".

Desktop
Tablet
Mobile
Editable example

Vertical breakpoint#

To change the vertical breakpoint (defaulted to "tablet"), use the verticalBelow prop.

Desktop
Tablet
Mobile
Editable example

Full width#

Desktop
Tablet
Mobile
Editable example

Read only#

Desktop
Tablet
Mobile
Editable example

Accessibility#

The <OptionButtons> component follows the WAI ARIA Checkbox Pattern and WAI ARIA RadioGroup Pattern.

Rules#

  • The outer wrapper of the OptionButtons has a role of group.

Patterns#

  • The checkbox or radio has a role of checkbox or radio.
  • When the checkbox or radio has focus, pressing the Space key changes the state of the option.
  • Pressing Tab and Shift + Tab moves focus in and out of the checkbox or radio group.
  • Pressing Space checks the selected checkbox or radio button.
  • Pressing Up, Down, Left or Right will move the current selection to the next or previous item.

References#

Props#

OptionButtons Props#

defaultValue string | string[]

disabled boolean

isFullWidth boolean

onBlur (values: string | string[]) => void

onChange 

(values: string
  | string[], value: string) => void

options 

(BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 10 more ... & { ...; })[]

palette 

"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})

readOnly boolean

size 

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

state string

type "checkbox" | "radio" Required

value string | string[]

Inherits Group props

borderRadius string

Sets the border radius of the group.

orientation "horizontal" | "vertical"

Sets the orientation of the group.

verticalBelow 

"tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"
  | "min-fullHD"
  | "max-fullHD"
  | "min-widescreen"
  | "max-widescreen"
  | "min-desktop"
  | "max-desktop"
  | "min-tablet"
  | "max-tablet"
  | "min-mobile"
  | "max-mobile"

Sets the breakpoint at which the group should snap to be vertical.

Inherits Flex props
Inherits Box props

use 

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children 

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

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

themeKey string

OptionButtonsField Props#

optionButtonsProps 

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & CSSProperties & LocalBoxProps & LocalGroupProps & LocalOptionButtonsProps

Additional props for the OptionButtons component

Inherits OptionButtons props

defaultValue string | string[]

disabled boolean

isFullWidth boolean

onBlur (values: string | string[]) => void

onChange 

(values: string
  | string[], value: string) => void

options 

(BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 10 more ... & { ...; })[]

palette 

"default"
  | "primary"
  | "secondary"
  | "success"
  | "danger"
  | "warning"
  | (string & {})

readOnly boolean

size 

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

state string

type "checkbox" | "radio" Required

value string | string[]

Inherits Group props

borderRadius string

Sets the border radius of the group.

orientation "horizontal" | "vertical"

Sets the orientation of the group.

verticalBelow 

"tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"
  | "min-fullHD"
  | "max-fullHD"
  | "min-widescreen"
  | "max-widescreen"
  | "min-desktop"
  | "max-desktop"
  | "min-tablet"
  | "max-tablet"
  | "min-mobile"
  | "max-mobile"

Sets the breakpoint at which the group should snap to be vertical.

Inherits Flex props
Inherits Box props

use 

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children 

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

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

themeKey string

Inherits FieldWrapper props

description 

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the description text of the field wrapper.

hint 

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the bottom hint text of the field wrapper.

isOptional boolean

Sets the optional flag (and displays optional text) on the field wrapper.

isRequired boolean

Sets the required flag (and a required astrix) on the field wrapper.

label 

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the label on the field wrapper.

labelType "label" | "legend"

Sets the label type on the field wrapper.

tooltip 

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

tooltipTriggerComponent 

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip trigger component.

validationText string

Sets the bottom validation text of the field wrapper.

Theming#

OptionButtons.styles.base
Desktop
Tablet
Mobile
OptionButtons.Button.styles.base
Desktop
Tablet
Mobile
On this page
Copyright © 2021 Jake Moxey