import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Box/Box" />

# Box

A Box is a flex-based component that can be used as a container for text, form controls, or other components. 
You can customize the colors, margins, and padding surrounding the objects in the box.

This component should be used to style form controls, or as a container. 
It should not be used for large, complex layouts. Use a [React Spectrum Grid](https://react-spectrum.adobe.com/react-spectrum/Grid.html) instead. 

The Box is built on [Box-Theme UI](https://theme-ui.com/components/box/)
and accepts most [Styled System style props](https://styled-system.com/table/).

### Required components

- This component can be used independently and does not require additional components. 

### Accessibility

This component adheres to the [WCAG 2.1 - 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) 
accessibility guidelines.