FigMayo Logo

LIBRARIES

🎨 Foundations

core

Fills & Effects
Ctrl-K
⚙️ Primitives/Forms
Updated 22 November 2024
Forms

Overview

A form is a group of related input controls that allows users to provide data or configure options. Components in this section can be used to capture a variety of data points in the most efficient way.

Switches

Here is some documentation about this component

switch-light(8 variants)
View Figma
    PlaygroundFigmaStorybook
Figma notes
The darkmode switches are only to be used in the main app for switching between light and darkmode, not for other UI elements.
input(36 variants)
View Figma

The form component is configurable to fit various use cases and layouts. It is simple out of the box, and users are responsible for configuring it to suit their needs. For in-depth design guidance on the different ways to configure and extend a form, see the form pattern.

Figma notes
This input has boolean options for the the icons and password string. Helper text and label are optional. Always have a label when there are more than two inputs in a form.
input-dropdown(9 variants)
View Figma

This component gives users the option to select a variable that they can submit along with their form. We use this exclusively on our “invite modal”, where users can set the role of the person they are inviting.

Radio Buttons

Here is some documentation about this component

radio-button(12 variants)
View Figma
Checkboxes

Here is some documentation about this component

Toggles

A toggle is used to quickly switch between two possible states. They are commonly used for “on/off” switches.

toggle(2 variants)
View Figma
Selects

There are three different variants of dropdowns that support various kinds of functionality — dropdown, multiselect, and combo box.

select(12 variants)
View Figma
Figma notes
Dropdowns can be used in forms on full pages, in modals, or on side panels. The dropdown component is used to filter or sort contents on a page. It is a stylized version of the select component, and can be styled as needed.
segmented-control(2 variants)
View Figma
Figma notes
Testing notes. Does this line break work This should be 1 space This should be 2 spaces