[component]

Dev Mode
Height field
Description
Use the Height field to allow users to input their height. The field stores the value as total inches and displays it as feet and inches. On web, two text inputs accept feet and inches separately. On iOS, tapping the field opens an action sheet for selection. On Android, two dropdowns allow selection of feet and inches. Supports optional min/max props to constrain the allowed height range.
Height
Usage Guidelines
Do
Use this component for height input in forms.
Display the value in a human-readable format (e.g., 5ft 10in).
Provide clear error messages when validation fails.
Don't
Do not use this component for other measurements like weight or distance.
Do not allow values outside the valid range. Use min/max props to constrain if needed.
Accessibility
Users should be able to use tab to navigate between the feet and inches inputs.
The field should announce the current value to screen readers.
On mobile, the action sheet should be accessible via screen readers.
Props
Name
Type
Required
Description
onChange
OnChangeCallback
Required
blurOnSubmit
boolean
disabled
boolean
errorText
string
helperText
string
iconName
IconName
id
string
max
number
Maximum height in total inches
min
number
Minimum height in total inches
onBlur
OnChangeCallback
onEnter
onFocus
onIconClick
onSubmitEditing
placeholder
string
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Number field, Text field
Examples
Basic Height Field
Height
Height Field with Value
Height
Height Field with Helper Text
Height
Enter your height in feet and inches
Height Field with Error
Height
Height is required
Disabled Height Field
Height
This field is disabled