Skip to main content

Field

Interfaces

FieldBodyProps

Props for the FieldBody component.

Extends

  • HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

PropertyTypeDescriptionOverrides
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').-
bgColor?"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 for the field body.-
children?ReactNodeField body content.React.HTMLAttributes.children
className?stringAdditional CSS classes.React.HTMLAttributes.className
color?"primary" | "link" | "info" | "success" | "warning" | "danger"Bulma color for the field body.React.HTMLAttributes.color
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').-
textColor?"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"Text color for the field body.-
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').-

FieldLabelProps

Props for the FieldLabel component.

Extends

  • HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

PropertyTypeDescriptionOverrides
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').-
bgColor?"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 for the label.-
children?ReactNodeField label content.React.HTMLAttributes.children
className?stringAdditional CSS classes.React.HTMLAttributes.className
color?"primary" | "link" | "info" | "success" | "warning" | "danger"Bulma color for the label.React.HTMLAttributes.color
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').-
size?"normal" | "medium" | "small" | "large"Size for the field label.-
textAlign?"centered" | "justified" | "left" | "right"Text alignment (e.g., 'centered', 'left').-
textColor?"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"Text color for the label.-
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').-

FieldProps

Props for the Field component.

Extends

  • HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

PropertyTypeDescriptionOverrides
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').-
bgColor?"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 for the field.-
children?ReactNodeField content.React.HTMLAttributes.children
className?stringAdditional CSS classes.React.HTMLAttributes.className
color?"primary" | "link" | "info" | "success" | "warning" | "danger"Bulma color for the field.React.HTMLAttributes.color
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').-
grouped?boolean | "centered" | "right" | "multiline"Group controls in a row (optionally centered, right, or multiline).-
hasAddons?booleanGroup controls as addons.-
horizontal?booleanRenders the field as horizontal (label and control side by side).-
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').-
label?ReactNodeField label.-
labelProps?LabelHTMLAttributes<HTMLLabelElement> & objectProps for the label element.-
labelSize?"normal" | "medium" | "small" | "large"Size for the label.-
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').-
textColor?"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"Text color for the field.-
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

Field component for rendering a Bulma field container. Supports horizontal, grouped, and labelled fields.

Parameters

props

FieldProps

Props for the Field component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered field container.

See

Bulma Field documentation