#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

#Descriptions

The description text is placed underneath the label.

Required for your bumbag

#Hints

The hint text is placed underneath the field child.

Must be awesome

#Optional fields

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

OPTIONAL

#Required fields

*

#States

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

#Tooltips

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

#Custom tooltip trigger

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

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

#Custom label

Username

#Custom description

Required for your bumbag

#Custom hints

Must be awesome

#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 "left" | "right" | "center"

alignY "bottom" | "top" | "center"

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 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 © 2020 Jake Moxey