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#

<FieldWrapper label="Username">
  <Input />
</FieldWrapper>

Descriptions#

The description text is placed underneath the label.

<FieldWrapper label="Username" description="Required for your bumbag">
  <Input />
</FieldWrapper>

Hints#

The hint text is placed underneath the field child.

<FieldWrapper label="Username" hint="Must be awesome">
  <Input />
</FieldWrapper>

Optional fields#

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

<FieldWrapper label="Username" isOptional>
  <Input />
</FieldWrapper>

Required fields#

<FieldWrapper label="Username" isRequired>
  <Input />
</FieldWrapper>

States#

<FieldStack spacing="major-4">
  <FieldWrapper
    label="Username"
    validationText="This is an invalid name"
    state="danger"
  >
    <Input defaultValue="Jake" />
  </FieldWrapper>
  <FieldWrapper
    label="Username"
    validationText="Please check the box!"
    state="primary"
    marginTop="major-2"
  >
    <Input defaultValue="Jake" />
  </FieldWrapper>
  <FieldWrapper
    label="Username"
    validationText="Nice one!"
    state="success"
    marginTop="major-2"
  >
    <Input defaultValue="Jake" />
  </FieldWrapper>
</FieldStack>

Tooltips#

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

<FieldWrapper label="Username" tooltip="Your username must be awesome.">
  <Input />
</FieldWrapper>

<FieldWrapper
  label="Username"
  tooltip={
    <Text fontSize="150">Your username must be <Text fontWeight="bold">awesome.</Text></Text>
  }
>
  <Input />
</FieldWrapper>

Custom tooltip trigger#

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

<FieldWrapper
  label="Username"
  tooltip="Your username must be awesome."
  tooltipTriggerComponent={<Button size="small" minHeight="unset">Tooltip</Button>}
>
  <Input />
</FieldWrapper>

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

Custom label#

<FieldWrapper label={<Text color="primary">Username</Text>}>
  <Input />
</FieldWrapper>

Custom description#

<FieldWrapper
  a11yId="username"
  label="Username"
  description={<Text color="primary">Required for your bumbag</Text>}
>
  <Input />
</FieldWrapper>

Custom hints#

<FieldWrapper
  a11yId="username"
  label="Username"
  hint={<Text color="primary">Must be awesome</Text>}
>
  <Input />
</FieldWrapper>

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.

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

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

Theming#

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    styles: {
      base: {
        background: "#ffe3a4"
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    Label: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    DescriptionText: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    HintText: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    OptionalText: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    RequiredText: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    ValidationText: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    TooltipTrigger: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  FieldWrapper: {
    TooltipPopover: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>