Input

Components

Input / Basic / Text Only
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
mail_outline
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Basic / Icon Left
Input / Basic / Icon Right
mail_outline
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.
mail_outline
This is input caption text.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input / Label / Icon Left
Input / Label / Icon Right
mail_outline
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.

arrow_upward