Designing a Plume TextField

A Plume TextField is a theme-able <input type="text"/> replacement. It can optionally include a starting icon and ending icon.

TextField Anatomy

Some variants that your TextField component built in Plasmic should include are:

Variant	Description	Required?
isDisabled	Shows TextField in disabled state	Recommended
hasLabel	Shows a label for the TextField	Recommended
showStartIcon	Shows an icon at the start of the TextField	Optional
showEndIcon	Shows an icon at the end of the TextField	Optional

In addition, you should consider styling the following interaction variants:

Interaction Variant	Description	Required?
Focus Visible Within	Control is focused via keyboard tabbing	Recommended
Focused Within	Control is focused	Optional
Hover	Control is hovered	Optional

Some elements that should be in your TextField component are:

Element	Description	Required?
root	The root element	Required
textbox	The actual `input` element	Required
textboxContainer	The actual element that contains the actual textbox, and is made to look like a textbox. Sometimes the actual `input` element is transparent, and some containing element is styled like an input instead; this is that element. Clicking on this element will focus on the actual `input`.	Optional
labelContainer	The element containing the label for this control	Recommended

Some slots that your TextField component should have are:

Slot	Description	Required?
label	Label for this TextField	Required
startIcon	Contains the starting icon for the TextField	Optional
endIcon	Contains the ending icon of the TextField	Optional