TextField

The TextField components implements an <input type="text"/> replacement, which can be decorated with a start or end icon.

Examples

This is just an example TextField component, designed in the Plain Kit project. You have total freedom to design Plume components exactly as you'd want them to be, with your own unique variants and behaviors.

Switch to a different kit:

Plain Kit

Basic TextField

TextField with Start Icon

TextField with End Icon

TextField Props

PropTypeDescription
labelReact.ReactNodeLabel for the TextField; if not specified, then aria-label or aria-labelledby should be specified.
valuestringValue of the TextField (controlled)
defaultValuestringDefault value of the TextField (uncontrolled)
placeholderstringText to display when TextField is empty
isDisabledbooleanWhether the TextField is disabled
isReadOnlybooleanWhether the TextField is read-only
selectAllOnFocusbooleanWhether to select all the text in the the TextField on focused
refPlumeTextFieldRefProgrammatic access to TextField

PlumeTextFieldRef

MethodDescription
focus()Focuses this TextField
select()Selects the text in the TextField
UNSAFE_getInputElement()Returns the input DOM element
UNSAFE_getDOMNode()Returns the root DOM element