Text
An accordion is a container that contains a header and a body that is revealed/hidden when toggled. When more than one accordion is used, it stacks vertically with no spacing.
Anatomy
Legend
- Label
- Error text
- Helper text
- Border
Options
Size
Input has two available sizes default and small.
Optional helper text
Optional helper text can be added.
Behavior
Label
When the input is small, the label text does not transition but remains in place.
Focus
When in focus, the input will transition the border to blue-bright and
when using the default option, the label will transition to small.
Error
When in error state, the input will transition the border to red and
when using the default option, the label will transition to red.
Filled state
The border will transition back to the default color when the input is filled with a value and not in any other state.
Success state
The border will transition back to the default color when the input is filled with a value and not in any other state.
Disabled state
Disabled inputs will be gray in color.
Overflow
Input text does not overflow regardless of the size of the container.
Usage guidance
Avoid small widths
If a small width text input is required, be sure the expected input will be short.
Vary input heights
If more than one input is being used, all inputs must be the same size variant.
Specs
Size
Inputs have fixed height for each size and take 100% of the parent container width.
Spacing
Spacing for both input sizes is fixed 16px left and right padding with 8px padding top and bottom.
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)