Input

Preview

The field is 56 pt tall in every state, 104 with its label and hint, and underlined: one rule on the bottom edge and no fill or radius. Type in it.

Which types does Input have?

Input has six types: Default, Left Selection, Right Selection, Password, Prefix and Suffix. Default is a plain field, and Left and Right Selection put a picker on one side of a divider, for a dial code or a currency.

Password leads with a lock and ends on an eye-off icon, which in the specimen above is a switch that shows the typed text. Prefix writes https:// inside the value row in the placeholder color, so the person types only the part that varies.

Suffix ends the row on a unit such as kg.

Which states does Input have?

Input has five states: Placeholder, Filled, Focused, Error and Disabled. Only the rule, the text and the icons move, so a form does not jump on error, and Focused adds a clear button before the trailing icon.

Focused is the brand rule alone: an underlined field has no box for a focus ring to follow, and the brand rule against the gray one is the cue a keyboard user needs.

Error turns the rule, the hint and its icon red and keeps the typed value readable. Say what went wrong in the hint, because red is not a message.

Every title row can carry (Optional) after the title and a Tooltip info icon at the far end. Both are Boolean properties and both are on by default, so turn them off on a field that is required or says everything in its label.

Chip Input

The same underlined field with a tag icon, for entries that become chips. Once there is a value, the chips sit in their own row between the rule and the hint.

Counter Input

A pill with two round buttons and a number, for a quantity you nudge rather than type: the control iOS calls a stepper. The buttons work.

Digit Input

One cell per digit, for a code that arrives by text message: 64 pt squares at radius 16 with a 30/36 Medium digit, so the number reads at arm's length. Type a code in it.

Text Area

The same underlined field, one line deep at first, grows by a line as you type up to five and then scrolls inside instead of pushing the form down. Type in it.

The counter sits at the end of the hint row and follows the typing. Focused paints the rule in brand/base and Error in state/error/base-500, the same as Text Input.

Use a Text Area for an answer longer than a sentence and a Text Input for everything else.

Stepper

Two buttons and a number, for a value you change by one, with no field and no label: the stepper sits in a row that already says what it counts. The buttons work.

Min and Max change only the glyph of the button that would cross the bound, to fg/disabled-400. The button keeps its white fill and its stroke, so the other button still reads as live.

The md size has 44 pt buttons and meets the iOS touch target. The sm size has 36 pt buttons, so give it a larger hit area in code.

Composer

A message or comment bar at one 40 pt height. Send stays dormant while the field is empty and turns brand blue as soon as there is text.

The avatar, the action and the send circle share the 40 pt height with the field, so they line up without extra spacing. Avatar and Action are off by default and the paperclip accessory is on.

Style Overlay draws the field and the action on translucent black and white with a blur, for a bar that floats over a photo or a video. Press Send in the live bar and it empties the field, as sending a message does.

How does Input differ on iOS and Material 3?

Appetite UI draws an underlined field with its own label and hint, 56 pt tall. iOS draws a bare 52 pt row and Material 3 draws a filled or outlined box, 56 dp tall.

The minimum touch target comes from platform/min-touch-target, 44 pt on iOS and 48 dp on Android, and a 56 field row clears both. Read Platform Bridge for the switch, and iOS and Material 3 for the platform mirrors.

Properties

Seven sets share one Figma page. Every property and its options, per set, read from the component definitions.

Text Input 30 variants, Text Area 5, Chip Input 5, Counter Input 5, Digit Input 5, Stepper 6, Composer 4. Read from Figma on October 2, 2026.

Tokens

Every value the input reads, resolved through its aliases to the primitive underneath.

The Overlay Composer uses the primitives colors/alpha/black/alpha-24, colors/alpha/white/alpha-24 and, for the placeholder, colors/alpha/white/alpha-72, which do not change between Light and Dark, with backdropBlur/sm. Counter and Digit Focused use the effect style focusRing/brand: a 2 pt gap in the surface color, then a 2 pt brand ring.

Guidelines

Keep fields at 16 pt text or larger so iOS does not zoom the page on focus. Name every field with its label, because the placeholder disappears as soon as someone types.

The label title, the placeholder and the affix text use text/soft-500, #8E8E93, which measures 3.26 to 1 on white in Light. Give the real field a color at 4.5 to 1 for text a person has to read.

For keyboard focus the real field shows the brand rule, and Counter and Digit add the 2 plus 2 focus ring. Composer is 40 pt high, so give it a 44 pt hit area in code.