#RadioGroup

A <RadioGroup> can be used to render a set of Radio components.

#Import

import { RadioGroup } from 'bumbag'

#Usage

#Fields

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

It accepts a combination of RadioGroup props and FieldWrapper props.

What's the weather?

#Horizontal group

#Disabled

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

#States

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

#Default value

Specify a default checked value with the defaultValue prop.

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

#Accessibility

The <RadioGroup> component follows the WAI ARIA RadioGroup Pattern.

#Patterns

  • The outer wrapper of the group has a role of radiogroup.
  • The radio has a role of radio.
  • Pressing Tab and Shift + Tab moves focus in and out of the radio group.
  • Pressing Space checks the selected radio button.
  • Pressing Up, Down, Left or Right will move the current selection to the next or previous item.

#References

#Props

#RadioGroup Props

defaultValue string

Default value of the radio group

disabled boolean

Disables the radio group

name string Required

orientation "horizontal" | "vertical"

Are the radio inputs layed out horizontally?

options RadioProps[] Required

Radio group options

spacing string

state string

State of the radio group. Can be any color in the palette.

value string

Controlled value of the radio group

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

Function to invoke when radio group has changed

#RadioGroupField Props

radioGroupProps

Pick<BoxProps, "children"
  | "unstable_system"
  | "defaultChecked"
  | "defaultValue"
  | "suppressContentEditableWarning"
  | "suppressHydrationWarning"
  | "accessKey"
  | ... 774 more ...
  | "themeKey"> & LocalRadioGroupProps

Additional props for the RadioGroup component

Inherits RadioGroup props

defaultValue string

Default value of the radio group

disabled boolean

Disables the radio group

name string Required

orientation "horizontal" | "vertical"

Are the radio inputs layed out horizontally?

options RadioProps[] Required

Radio group options

spacing string

state string

State of the radio group. Can be any color in the palette.

value string

Controlled value of the radio group

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

Function to invoke when radio group has changed

Inherits FieldWrapper props

children

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>
  | (({ elementProps }: { ...; }) => ReactNode)

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.

Inherits Box props

use

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

className string

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

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

altitude string

variant string

colorMode string

overrides

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

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

themeKey string

#Theming

RadioGroup.styles.base
Radio.styles.base
Radio.Icon.styles.base
Radio.Label.styles.base
Radio.HiddenInput.styles.base
Copyright © 2020 Jake Moxey