Input

Components

Input / Basic / Text Only
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Basic / Text Only / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Basic / Icon Left
face
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
face
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Basic / Icon Left / Dark
Input / Basic / Icon Right
face
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Basic / Icon Right / Dark
face
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Label / Text Only
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Label / Text Only / Dark
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Label / Icon Left
face
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Label / Icon Left / Dark
face
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Label / Icon Right
face
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Label / Icon Right / Dark
face
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Customize

Edit Border Color, radius and input states
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Edit Height and inner shadow
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

A basic component for getting the user input.

Video tutorials

Coming soon...

Textarea

Components

Textarea / Basic
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textarea / Basic / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textarea / Label
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textarea / Label / Dark
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Customize

Edit input component on the Input Page to affect Textarea's styling.

Edit Min Height
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

A textarea is an multiple line input field that users can type into. It is also resizable.

Video tutorials

Coming soon...

Form Toggles

Components

Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Switch
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Switch / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Best Practices

Use components to build interfaces. Search the component's name in the Component panel (Shift + A) or use quick search (Ctrl + E). Once you added a Component to your page unlink it to make changes. Right-click on the symbol’s label and choose unlink from symbol. This is the rule. We use overrides only as an exception for simple components that you'd rather want to re-style on the specific page within Style Guide (buttons, toggles etc. - mostly atoms).

Component Description

Checkbox

Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.

Radio

Use radio buttons to present each item in a list of options where users must make a single selection.

Switch

Use radio buttons to present each item in a list of options where users must make a single selection.

Select

Select lets users choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.

Video tutorials

Coming soon...

Example Forms

Components

Example Form / Submit / Horizontal
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Submit / Horizontal / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Submit / Vertical
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Submit / Vertical / Dark
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Sign in
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Sign in / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Sign up
Already have an account?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Sign up / Dark
Already have an account?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Example Form / Message / Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.