Skip to content

Design system

Input

Last updated 2 November 2026

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 these components in Figma, install the latest Insites font icons.

  1. Download the Insites icon font.
  2. Install the font file on your computer.
  3. 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

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 WrapperTrue, FalseToggle 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 TooltipTrue, FalseToggle to show or hide the tooltip for the component.
Show Unit LeftTrue, FalseToggle to show or hide the left unit indicator for the component.
Show Unit RightTrue, FalseToggle to show or hide the right unit indicator for the component.
Show IconTrue, FalseToggle to show or hide the icon for the component.
Show Colour PickerTrue, FalseToggle to show or hide the colour picker element for the component.