--- title: Input description: Input collects text, passwords, numbers, codes and messages. Figma component with six text types, Text Area, Chip, Counter, Digit, Stepper and Composer. group: Components source: https://www.appetiteui.com/docs/input dateModified: 2026-10-03 --- # Input Updated: October 3, 2026. Input collects one line of text, a password, a number, a code or a message, with a label, a hint and an error that never change the height of the field. ## 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. Specimen: Type Default, State Placeholder. 340 x 104, label 20, field 56, hint 16, gap 6. ## 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. Specimen: Type. Default, Left Selection, Right Selection, Password, Prefix, Suffix. 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. Specimen: State. Placeholder, Filled, Focused, Error, Disabled. 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. Specimen: Chip Input. field padding 8, gap 8, chip row 32 tall. Specimen: State Filled and Focused. ## 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. Specimen: Counter Input. radius 9999, padding 6 and 12, buttons 32, value 18/28 Semi Bold. Specimen: State Focused, Error, Disabled. The pill strokes border/sub-200 at rest. Focused is a 1 pt brand stroke with the focus ring around the pill, and Disabled is a flat gray fill without a stroke. ## 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. Specimen: Digit Input. 64 x 64, radius 16, padding 16 and 8, 30/36 Medium. Specimen: State Focused, Error, Disabled. Focused is a 1 pt brand stroke plus the focus ring, and Error is a red stroke. Disabled is a gray fill without a stroke. ## 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. Specimen: State Placeholder. 340 wide, 56 for one line, 24 more a line up to five, padding 16. Specimen: State Filled, Focused, Error, Disabled. 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. Specimen: Size md, State Default. sm 107 x 36, md 123 x 44, gap 12, value 16/24 Semi Bold. Specimen: Size sm, State Default, Min, Max. 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. Specimen: Style Default, live. 361 x 40, field 313 x 40, gap 8, avatar, action and send 40. Specimen: Style Default and Overlay, State Empty and Typing. 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. | Appetite UI component | iOS counterpart | Material 3 counterpart | What differs | | --- | --- | --- | --- | | `Text Input` | `iOS / Text Field`, a 402 x 52 row with Placeholder, Focused, Typing and Value Entered | `M3 / Text Field`, 280 x 56, Filled or Outlined at radius 4, with Enabled, Focused, Error and Disabled | Appetite UI adds a label above, a hint below and an Error state that keeps the height. The platform fields carry no hint row. | | `Password`, `Prefix`, `Suffix` types | None in the file. SwiftUI uses SecureField for a password. | None in the file | The eye switch, the https:// prefix and the unit suffix are part of the Appetite UI field. | | `Counter Input`, `Stepper` | `iOS / Stepper`, a 92 x 32 pill | None in the file | Appetite UI Stepper is 107 x 36 at sm and 123 x 44 at md, so the md buttons meet the 44 pt target. | | `Digit Input` | None in the file. Set the one-time-code keyboard and autofill in code. | None in the file | Cells are 64 pt squares at radius 16. | | `Text Area`, `Chip Input`, `Composer` | None in the file | None in the file | These exist as Appetite UI components only. Chip Input draws its chips with the Chip component. | 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](https://www.appetiteui.com/docs/platform-bridge) for the switch, and [iOS](https://www.appetiteui.com/docs/ios) and [Material 3](https://www.appetiteui.com/docs/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. | Property | Type | Options | Default | | --- | --- | --- | --- | | `Type` | Variant | Default, Left Selection, Right Selection, Password, Prefix, Suffix | Default | | `State` | Variant | Placeholder, Filled, Focused, Error, Disabled | Placeholder | | `Input Label`, `Optional`, `Tooltip`, `Help` | Boolean | on, off | on | | `Icon Left`, `Icon Right` | Boolean | on, off | on | | `Icon Left Swap`, `Icon Right Swap` | Instance swap | any icon | phone, chevron-down | | `Input Label Text`, `Input Text`, `Help Text` | Text | any string | Title of input, Placeholder text, This is a hint text to help user | | `Password Text`, `Prefix Text`, `Suffix Text` | Text | any string | ten dots, https://, kg | | Set | Property | Type | Options | Default | | --- | --- | --- | --- | --- | | Text Area | `State` | Variant | Placeholder, Filled, Focused, Error, Disabled | Placeholder | | Text Area | `Input Label`, `Optional`, `Tooltip`, `Help`, `Counter` | Boolean | on, off | on | | Text Area | `Input Label Text`, `Input Text`, `Help Text`, `Counter Text`, `Value Text` | Text | any string | Title of input, Add more detail, hint, 0/500, a sample sentence | | Chip Input | `State` | Variant | Placeholder, Filled, Focused, Error, Disabled | Placeholder | | Chip Input | `Input Label`, `Optional`, `Tooltip`, `Help`, `Icon Left` | Boolean | on, off | on | | Chip Input | `Input Label Text`, `Input Placeholder Text`, `Help Text` | Text | any string | Title of input, Add tags, hint | | Counter Input | `State` | Variant | Placeholder, Filled, Focused, Error, Disabled | Placeholder | | Counter Input | `Input Label`, `Optional`, `Tooltip`, `Help` | Boolean | on, off | on | | Counter Input | `Input Label Text`, `Input Number`, `Help Text` | Text | any string | Title of input, 24, hint | | Digit Input | `State` | Variant | Default, Focused, Filled, Disabled, Error | Default | | Set | Property | Type | Options | Default | | --- | --- | --- | --- | --- | | Stepper | `Size` | Variant | sm, md | sm | | Stepper | `State` | Variant | Default, Min, Max | Default | | Stepper | `Value` | Text | any string | 2 | | Composer | `Style` | Variant | Default, Overlay | Default | | Composer | `State` | Variant | Empty, Typing | Empty | | Composer | `Avatar`, `Action` | Boolean | on, off | off | | Composer | `Accessory` | Boolean | on, off | on | | Composer | `Placeholder`, `Value` | Text | any string | Message, Looks good to me | | Composer | `Action Icon`, `Accessory Icon` | Instance swap | any icon | camera, paperclip | 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. | Token | Light | Dark | Applied to | | --- | --- | --- | --- | | `border/sub-200` | #D1D1D6 | #48484A | The rule under the field, the Counter pill and the Digit cell | | `brand/base` | #155DFC | #2B7FFF | The rule while focused, the focused Counter and Digit stroke, the typing Send | | `state/error/base-500` | #FB2C36 | #FB2C36 | The rule, the stroke and the hint on error | | `text/soft-500` | #8E8E93 | #AEAEB2 | Label title, placeholder and affix text | | `fg/soft-500` | #8E8E93 | #AEAEB2 | Every icon at rest | | `text/strong-950` | #0E0E0F | #FFFFFF | The typed value, the Counter label and the Stepper value | | `text/sub-700` | #48484A | #C7C7CC | Hint text | | `text/disabled-400` | #AEAEB2 | #8E8E93 | Value and hint when disabled, and (Optional) | | `border/soft-100` | #E9E9EA | #2F2F31 | Selection divider, Counter and Stepper buttons | | `bg/white-0` | #FFFFFF | #0E0E0F | Counter, Digit and button fills | | `bg/weak-50` | #F4F5F5 | #242427 | Composer field, disabled Counter and Digit fill | | `bg/soft-100` | #E9E9EA | #48484A | The dormant Send | | `fg/sub-700` | #48484A | #C7C7CC | The Stepper glyphs | | `fg/disabled-400` | #AEAEB2 | #8E8E93 | Icons when disabled, the Stepper glyph at a bound and the dormant Send arrow | | `text/on-color/strong` | #FFFFFF | #FFFFFF | The Send arrow while typing | | `static/static-white-0` | #FFFFFF | #FFFFFF | The Overlay value and glyphs | 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 - Do: Keep the hint slot filled from the start and swap its text on error. The field never changes height, so the form does not jump. - Avoid: Do not signal the error with the red rule alone. A color blind user cannot read the rule, so the message has to say what is wrong. 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. ## In the screens and the glossary - Screens: [Sign in and sign up screens](https://www.appetiteui.com/screens/patterns/sign-in) - Screens: [Checkout and payment screens](https://www.appetiteui.com/screens/patterns/checkout) - Screens: [Chat screens](https://www.appetiteui.com/screens/patterns/chat)