Skip to main content

Checkboxes

Interfaces

CheckboxesProps

Props for the Checkboxes 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').
children?ReactNodeCheckbox 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 Checkbox components inside a Bulma 'checkboxes' wrapper. Leverages useBulmaClasses for consistency with other components.

Parameters

props

CheckboxesProps

Props for the Checkboxes component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered checkboxes group.

See

Bulma Checkboxes documentation