Fields

Single-line text input. 56 dp tall, 4 dp corner, 1 dp outline that thickens to 2 dp on focus or error. Label sits above the field with an 8 dp gap; helper text sits below with a 16 dp left gutter so it aligns to the input text, not the border.

State × content matrix

Rows are interaction states. Columns are content configurations. Every combination is enumerated so design and engineering can agree on the same source of truth.

EmptyLabel + helper, no value
FilledWith input text
PrefixLeading unit or symbol
Trailing iconClear, chevron, etc.
AI-generatedLabel with AI tag
EnabledDefault resting
Title
Enter a title
Up to 100 characters.
Title
Vintage 90s Knit Sweater
Up to 100 characters.
Price
$48.00
Before fees and shipping.
Search
Knit sweater
Press enter to search.
Title AI
Vintage 90s Knit Sweater — Pastel Purple
Generated from your photos. Review before publishing.
FilledValue committed, not focused
Brand
Uniqlo
Matched from catalog.
Condition
New with tags
Visible to buyers.
Weight
1.2lb
Used to calculate shipping.
Category
Women › Sweaters › Crewneck
Required for Poshmark & Mercari.
Description AI
Soft pastel-purple knit, relaxed 90s fit, barely worn.
Rewrite anytime from the AI menu.
Focused2 dp primary border
Title
Enter a title
Up to 100 characters.
Title
Vintage 90s Knit Sweater
Up to 100 characters.
Price
$48.00
Before fees and shipping.
Search
Knit sweater
Press enter to search.
Title AI
Vintage 90s Knit Sweater — Pastel Purple
Generated from your photos. Review before publishing.
ErrorLabel + border + helper red
Title
Enter a title
Title is required.
Title
A really long title that exceeds the 100-character maximum length allowed on Poshmark…
Title is 12 characters over the limit.
Price
$—
Add a price to publish to Poshmark.
Search
Knit sweater
No results — try a different query.
Title AI
Sweater
Too short — include brand and item type.
DisabledOpacity 0.38
Title
Enter a title
Unlocks after photos are uploaded.
Title
Vintage 90s Knit Sweater
Published — unlist to edit.
Price
$48.00
Locked during active auction.
Category
Women › Sweaters › Crewneck
Locked during active auction.
Title AI
Vintage 90s Knit Sweater — Pastel Purple
AI rewrite disabled in this plan.

Token map

PartEnabled / FilledFocusedError
Container border 1 dp --sys-outline 2 dp --sys-primary 2 dp --sys-error
Label color --sys-on-surface-variant --sys-on-surface-variant --sys-error
Input text --sys-on-surface --sys-on-surface + caret --sys-primary --sys-on-surface
Helper / supporting --sys-on-surface-variant --sys-on-surface-variant --sys-error
Trailing icon --sys-on-surface-variant · hover layer --state-onSurface-08 same --sys-error
Disabled Entire component at opacity 0.38 — matches M3 disabled handling.
Shape · Height · Padding --alias-radius-field (4 dp) · --size-alias-field-height-default (56 dp, +24 dp label stack) · 16 dp horizontal
Type Label --type-title-md · Input --type-body-lg · Helper --type-body-sm