Skip to main content

Radios

Interfaces

RadiosProps

Props for the Radios component.

Extends

  • Omit<BulmaClassesProps, "color">

Properties

PropertyTypeDescription
alignContent?"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"Align content (e.g., 'center', 'stretch').
alignItems?"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"Align items (e.g., 'center', 'flex-start').
alignSelf?"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"Align self (e.g., 'auto', 'center').
backgroundColor?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"Background color class (e.g., 'primary', 'info').
childrenReactNodeRadio elements to render in the group.
className?stringAdditional CSS classes to apply.
colorShade?"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"Color shade suffix (e.g., '00', 'invert').
display?"block" | "flex" | "inline" | "inline-block" | "inline-flex"Display type (e.g., 'block', 'flex').
flexDirection?"row" | "row-reverse" | "column" | "column-reverse"Flex direction (e.g., 'row', 'column').
flexGrow?"0" | "1"Flex grow value (e.g., '0', '1').
flexShrink?"0" | "1"Flex shrink value (e.g., '0', '1').
flexWrap?"nowrap" | "wrap" | "wrap-reverse"Flex wrap (e.g., 'wrap', 'nowrap').
float?"left" | "right"Float direction (e.g., 'left', 'right').
fontFamily?"primary" | "sans-serif" | "monospace" | "secondary" | "code"Font family (e.g., 'sans-serif', 'code').
interaction?"unselectable" | "clickable"Interaction behavior (e.g., 'unselectable', 'clickable').
justifyContent?"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"Justify content (e.g., 'center', 'space-between').
m?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin (e.g., '0', '1').
mb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin bottom.
ml?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin left.
mr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin right.
mt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin top.
mx?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin horizontal (left and right).
my?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin vertical (top and bottom).
overflow?"clipped"Overflow behavior (e.g., 'clipped').
overlay?booleanApplies overlay styling if true.
p?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding (e.g., '0', '1').
pb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding bottom.
pl?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding left.
pr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding right.
pt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding top.
px?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding horizontal (left and right).
py?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding vertical (top and bottom).
radius?"radiusless"Border radius style (e.g., 'radiusless').
responsive?"mobile" | "narrow"Responsive behavior (e.g., 'mobile', 'narrow').
shadow?"shadowless"Shadow style (e.g., 'shadowless').
textAlign?"centered" | "justified" | "left" | "right"Text alignment (e.g., 'centered', 'left').
textSize?"1" | "2" | "3" | "4" | "5" | "6" | "7"Text size (e.g., '1', '2').
textTransform?"capitalized" | "lowercase" | "uppercase" | "italic"Text transformation (e.g., 'uppercase', 'italic').
textWeight?"light" | "normal" | "medium" | "semibold" | "bold"Text weight (e.g., 'light', 'bold').
viewport?"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"Viewport for responsive classes (e.g., 'mobile', 'desktop').
visibility?"hidden" | "sr-only"Visibility (e.g., 'hidden', 'sr-only').

Functions

default()

default(props, deprecatedLegacyContext?): ReactNode

Wraps Radio components inside a Bulma 'radios' wrapper. Leverages useBulmaClasses for consistency with other components.

Parameters

props

RadiosProps

Props for the Radios component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered radios group.

See

Bulma Radios documentation