Design system
Tabs
Last updated 15 January 2026
Insites Tabs is another way you can divide your Step/Process into separate individual steps. If you have more than a few fields on your form, it is good practice to separate your Form fields into tabs to avoid possibly overwhelming your users.
Requirements
To use these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of the component.
Figma Component Variant Properties
Tabs
| Properties | Options | Notes |
|---|---|---|
| State | Default, Active, Disabled, Error | Select the state for the tab component. |
| Hover | True, False | Toggle to use the hover state of the tab component. |
| Show Icon | True, False | Toggle to show or hide the icon for the tab component. |
| Show Label | True, False | Toggle to show or hide the label for the tab component. |