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.
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, "unstable_system" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 779 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
"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
Theming#
RadioGroup.styles.base
Radio.styles.base
Radio.Icon.styles.base
Radio.Label.styles.base
Radio.HiddenInput.styles.base