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.
| Property | Values | Default |
|---|---|---|
| type Variant | static | interactive (closed) | interactive (open) | static |
| isLastItem Variant | false | true | false |
| ↳ isOpen Variant | true | false | true |
| isInteractive Variant | false | true | false |
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