Input

Published on February 04, 2021, updated on August 25, 2023

Your One-Stop-Shop for all your Input needs. Insites' Input component allows for all kinds of Input you might require on your plaftorm. And.. its highly customisable too! You need an email input field? Go ahead and add it! You want to add a Label to that? Or an Icon? Go ahead!

Requirements

To use the buttons component in Figma please install the latest version of the Insites Font Icons.

Download the latest font file here.
Install the font file on your machine.
Restart Figma to load the file in your font list.

How to change icons in Figma

Open the icons list here.
Select and copy the icon you want to use from the list
Paste the icon into the icon layer in the component.

Figma Component Variant Properties

Input

Properties	Options	Notes
Has Value	True, False	Toggle to select if the input field will display the value or the placeholder for the component.
State	Default, Hover, Focus, Disabled, Read Only,	Select the state of the component.
Show Label Wrapper	True, False	Toggle to hide or show the label and tooltip for the component. Show Label and Show Tooltip property for the component will be hidden if this is disabled.
Show Label	True, False	Toggle to show or hide the label for the component.
Show Tooltip	True, False	Toggle to show or hide the tooltip for the component.
Show Unit Left	True, False	Toggle to show or hide the left unit indicator for the component.
Show Unit Right	True, False	Toggle to show or hide the right unit indicator for the component.
Show Icon	True, False	Toggle to show or hide the icon for the component.
Show Colour Picker	True, False	Toggle to show or hide the colour picker element for the component.

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.