Input
Underline field with a floating label that rises to a small caption once the field is active. An optional leading country-code segment (hasCountryCode) prepends a value such as +1 for phone entry, and an optional date affordance (hasDate) turns it into a date field.
Overview
Underline field with a floating label that rises to a small caption once the field is active. An optional leading country-code segment (hasCountryCode) prepends a value such as +1 for phone entry, and an optional date affordance (hasDate) turns it into a date field.
The default variant.
Variants and states
Anatomy
- 1Container.Content required Flex column that holds the label and value; it fills the width so the only gap after it is the gap to the trailing icon.
- 2Label.Text required Inline placeholder at rest, small floating label once the field is active.
- 3Container.Value optional The value row shown in the active states.
- 4Label.CountryCode optional The +1 country-code segment, shown when hasCountryCode is on (phone entry).
- 5IconTrailing optional Trailing chevron, shown when hasIconTrailing is on.
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
Properties
The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.
Accessibility
Associate the label with the field programmatically so it is announced on focus. Surface validation errors as text, not a red underline alone, and keep the field tall enough for a comfortable 44pt touch target.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.