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

TextField Variants

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

isDisabledShows TextField in disabled stateRecommended
hasLabelShows a label for the TextFieldRecommended
showStartIconShows an icon at the start of the TextFieldOptional
showEndIconShows an icon at the end of the TextFieldOptional

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

Interaction VariantDescriptionRequired?
Focus Visible WithinControl is focused via keyboard tabbingRecommended
Focused WithinControl is focusedOptional
HoverControl is hoveredOptional

TextField elements

Some elements that should be in your TextField component are:

rootThe root elementRequired
textboxThe actual input elementRequired
textboxContainerThe 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
labelContainerThe element containing the label for this controlRecommended

TextField slots

Some slots that your TextField component should have are:

labelLabel for this TextFieldRequired
startIconContains the starting icon for the TextFieldOptional
endIconContains the ending icon of the TextFieldOptional