Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Title |
Heading that describes the theme of form elements in the section. |
No |
|
2. Required, optional or pre-filled marker |
Textual label used to denote if all fields within the form section are required, optional or pre-filled. Marker’s copy is not changeable. |
Yes |
|
3. Badge |
Used to show status or functionality that’s early access/available on a higher plan. |
Yes |
|
4. Open/close Button |
Button that opens and closes the form section content. |
No |
|
5. Content |
Area to nest form elements and associated text within. |
No |
|
6. Border |
Border separating each Form Section. Last section in a parent container won’t have a border. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
Component dependencies
This component is internally dependent on the following components:
Accordion
An interactive heading that can be collapsed and expanded to hide and reveal content.
Badge
Badges highlight the status of a corresponding object
Help and support