FieldWrapper#

The <FieldWrapper> component is a utility belt that wraps around form elements.

It is used to render data about the field such as label, description text, hint text as well as validation text & color.

Import#

import { FieldWrapper } from 'bumbag'

Usage#

Editable example

Descriptions#

The description text is placed underneath the label.

Required for your bumbag
Editable example

Hints#

The hint text is placed underneath the field child.

Must be awesome
Editable example

Optional fields#

To indicate a field as optional, add the isOptional prop.

OPTIONAL
Editable example

Required fields#

*
Editable example

States#

This is an invalid name
Please check the box!
Nice one!
Editable example

Tooltips#

You can show a tooltip by supplying a string or an element to the tooltip prop.

Editable example
Editable example

Custom tooltip trigger#

You can modify the tooltip trigger button by supplying an element to the tooltipTrigger prop.

Editable example

Or you can set a default trigger via defaultProps in the theme

Custom label#

Username
Editable example

Custom description#

Required for your bumbag
Editable example

Custom hints#

Must be awesome
Editable example

Props#

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.

state "success" | "danger" | "warning"

Sets the state of 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

disabled boolean

overrides

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

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

themeKey string

Theming#

FieldWrapper.styles.base
FieldWrapper.Label.styles.base
FieldWrapper.DescriptionText.styles.base
This is a description
FieldWrapper.HintText.styles.base
This is a description
FieldWrapper.OptionalText.styles.base
OPTIONAL
FieldWrapper.RequiredText.styles.base
*
FieldWrapper.ValidationText.styles.base
This is validation text
FieldWrapper.TooltipTrigger.styles.base
FieldWrapper.TooltipPopover.styles.base
Copyright © 2021 Jake Moxey