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:
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 |
TextField elements
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 |
TextField slots
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 |