Inputs
import Input from '@prism/input'; // cjs or esm module
import '@prism/styles/[theme]/input.css'; // styles

Textual form controls—like <input>s, <select>s, and <textarea>s —are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Set heights using classes like .form-control-lg and .form-control-sm.

Disabled

ReactHTML

Active

ReactHTML

Focus

ReactHTML

Validation

ReactHTML

Interactive Input

The Interactive Input contains several addons to the input component. These include icons inside or outside of the input, as well as a password type for login forms.

ReactHTML

Number Input

ReactHTML

Textarea Counter

ReactHTML

Phone Number Input

The Phone Number input can be created in one of two ways: PhoneInput or InteractiveInput

ReactHTML

Props

Input

NameTypeDefaultDescription
autoFocusboolfalseEstablishes the autofocus attr on the input element
childrennodenull
typestring"text"Sets the type of input to display
sizestringlgSets the input size to small (sm) or large (lg)
validboolfalseDisplays the styles for a valid text input
invalidboolfalseDisplays the styles for an invalid text input
tagstring"input"
classNamestring"form-control"Sets a custom class name on the input
plain-textstringnull
placeholderstringnullSets the input placeholder text
disabledboolfalseDisables input and applies disabled styles

InteractiveInput

NameTypeDefaultDescription
typestring"text"Sets the type of input
minnumber0Sets the minimum number of characters input
iconBeforestringnullDisplays an icon before the input text
onClickBeforefunctionnull
iconLeftstringnull
onClickLeftfunctionnull
iconRightstringnullDisplays an icon before the input text
onClickRightfunctionnull
iconAfterstringnull
onClickAfterfunctionnull

Siblings

Label

NameTypeDefaultDescription
childrennoderequired
tagstring"label"
classNamestring"form-control"
forstringnull

FormGroup

NameTypeDefaultDescription
inlineboolnull
disabledboolfalse
tagstring"div"

Variants

FormGroup

NameTypeDefaultDescription
labelstringnull
minnumber0
maxnumber10
classNamestringnull
onChangefuncnull

PhoneInput

NameTypeDefaultDescription
aria-labelstringnull
classNamestringnull
iconbooltrue
labelstringnull
invalidboolfalse
labelstring''