FieldStack#

The <FieldStack> component is a utility belt that wraps around field elements to space them out correctly.

Import#

import { FieldStack } from 'bumbag'

Usage#

First name

Last name

Username

Password

Editable example

<FieldStack>
  <FieldStack orientation="horizontal">
    <InputField name="firstName" label="First name" />
    <InputField name="lastName" label="Last name" />
  </FieldStack>
  <InputField name="username" label="Username" />
  <InputField name="password" label="Password" type="password" />
  <Button palette="primary">Save</Button>
</FieldStack>

<FieldStack>
  <FieldStack orientation="horizontal">
    <InputField name="firstName" label="First name" />
    <InputField name="lastName" label="Last name" />
  </FieldStack>
  <InputField name="username" label="Username" />
  <InputField name="password" label="Password" type="password" />
  <Button palette="primary">Save</Button>
</FieldStack>

Props#

FieldStack Props#

Inherits Stack props

orientation "horizontal" | "vertical"

Sets the orientation of the stack component.

spacing string

Sets the spacing between the stack items.

verticalBelow string

Indicates the breakpoint at which the stack should become vertical.

Inherits Box props

use

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

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

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#

FieldStack.styles.base

Hello world

On this page