Skip to content

Design system

Tel

Last updated 2 November 2026

Your regular Phone number fields, but with a few upgrades. With the Insites Phone Component, not only does this support phone numbers Worldwide, this also allows for you to input any default value you might require on the field. If you wish to add sample digits on the field while static, you can. If you want to remove the Area code field, you also absolutely can. Anything you can think of functionality wise, the Insites tel field would likely have that feature.

Figma Component Variant Properties

Tel

Properties Options Notes
Has Value True, False Toggle to show the placeholder or the value for the component.
State Default, Hover - Country Code, Hover - Area Code, Hover Number, Focus - Country Code, Focus - Area Code, Focus - Number, Disabled, Read Only, Error Select the state to use for 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 LabelTrue, FalseToggle to show or hide the label for the component.
Show TooltipTrue, FalseToggle to show or hide the tooltip for the component.
Show Area CodeTrue, FalseToggle to show or hide the area code input for the component.