Inputs

Usage

Definition

The input allows a user to type and submit alpha-numeric text. Variations and rules for specific input types are specified below.

Full-screen width fields are only allowed on the XS grid (0-479). In all other cases, inputs should span to a specified number of columns in the layout.

Common Characteristics

Text inputs are normally 40px high, but a small 32px alternative may be used. Whichever size is used, use the same size for associated elements like selects and buttons.

When using text inputs always declare the appropriate HTML input type to ensure that mobile browsers invoke the correct mobile keyboard.

All text inputs have these states: disabled, active, and focused.

Default

Small

Label Options

In some scenarios it may be desired to move or hide the input label. Right aligned labels can save vertical space in the UI. Hidden labels should be used with caution, and only when there are very few fields (e.g. a login form), or where the input required is very well understood (e.g. the user’s street address).

Default

Label

Hidden labels are present in the code but hidden in the UI, allowing screen readers to read the label.

Required vs Optional

When designing forms, aim to include only required fields. Avoid optional fields unless designing a search/filter scenario, where all fields may be optional.

Do not mark required form fields with an asterisk (*). Instead, mark optional fields as “optional” next to the label when they are an exception that can't be avoided. Optionally, designers can include a text instruction, “All fields are required.” at the top of the form.

DefaultOptional

Optional fields should be an exception and marked as “Optional”.

Validation

When an input is required, validation should take place as soon as technically possible in the user's experience, beginning with while a field is in focus (e.g. a matching password field), then when a field loses focus (e.g. an email field), etc.

Default

It's all good message

Default

There's a problem message

Inputs requiring a specific number format should allow users to input the format as they wish without triggering a format error. The field should auto-format the displayed entry as the user types and submit the format required by the system. This can be done by ignoring all non-numeric characters entered (parentheses, dashes, dots, etc).

Default

This is not a valid 10-digit phone number.

Default

This is not a valid 10-digit phone number.

Types and Variants

Default

Default

Default

Default

Default

10 characters remaining

Number Input

Design

States

All text inputs have these states: disabled, active, and focused.

Size

Text inputs are normally 40px high, but a small 32px alternative may be used. Whichever size is used, use the same size for other form elements like dropdowns and buttons.

Full-width inputs are only allowed on the XS grid (0-479). In all other cases, inputs must span to a specified number of columns in the layout.

Disabled

Default

Small

Active

Default

Small

Focus

Default

Small

Validation

Default

It's all good message

Small

There's a problem message

Documentation

CSS

Modifiers that can be used with CSS classes in markup.

Class	Property
.form-control	Size
.btn-textonly	Text-Only Button
.btn-icon-only	Icon-Only Button
.disabled, :disabled	Disabled Styles
.is-invalid	applies danger styles
.is-valid	applies success styles
.btn-pagination	Pagination Button
.font-size-{size}	Applies sm or lg Label

Code

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

Live Editor

<div className="prism-docs__component-demo"> <Form className="bg-white p-3 w-100"> <FormGroup row> <Input.Label fontSize="lg">Default</Input.Label> <Input type="text" disabled placeholder="Disabled" id="formGroupExampleInput" /> </FormGroup> <FormGroup row> <Input.Label fontSize="sm" for="formGroupExampleInput3">Default</Input.Label> <Input type="text" disabled size="sm" className="form-control" id="formGroupExampleInput3" placeholder="Disabled" /> </FormGroup> </Form> </div>

<div className="prism-docs__component-demo">
  <Form className="bg-white p-3 w-100">
    <FormGroup row>
      <Input.Label fontSize="lg">Default</Input.Label>
      <Input
        type="text"
        disabled
        placeholder="Disabled"
        id="formGroupExampleInput"
      />
    </FormGroup>
    <FormGroup row>
      <Input.Label fontSize="sm" for="formGroupExampleInput3">Default</Input.Label>
      <Input type="text"
        disabled
        size="sm"
        className="form-control"
        id="formGroupExampleInput3"
        placeholder="Disabled"
      />
    </FormGroup>
  </Form>
</div>

Result

Loading...

Active

Live Editor

<div className="prism-docs__component-demo"> <form className="p-3 bg-white w-100"> <FormGroup row> <Input.Label htmlFor="formGroupExampleInput" fontSize="lg">Default</Input.Label> <Input defaultValue="active text input" type="text" className="focus active" id="formGroupExampleInput" placeholder="Form Control Regular" /> </FormGroup> <FormGroup row> <Input.Label fontSize="sm" for="formGroupExampleInput3">Small</Input.Label> <Input size="sm" defaultValue="active text input" type="text" className="focus" id="formGroupExampleInput3" placeholder="Form Contol Small" /> </FormGroup> </form> </div>

<div className="prism-docs__component-demo">
  <form className="p-3 bg-white w-100">
    <FormGroup row>
      <Input.Label htmlFor="formGroupExampleInput" fontSize="lg">Default</Input.Label>
      <Input
        defaultValue="active text input"
        type="text"
        className="focus active"
        id="formGroupExampleInput"
        placeholder="Form Control Regular"
      />
    </FormGroup>
    <FormGroup row>
      <Input.Label fontSize="sm" for="formGroupExampleInput3">Small</Input.Label>
      <Input
        size="sm"
        defaultValue="active text input"
        type="text"
        className="focus"
        id="formGroupExampleInput3"
        placeholder="Form Contol Small"
      />
    </FormGroup>
  </form>
</div>

Result

Loading...

Focus

Live Editor

<div className="prism-docs__component-demo"> <form className="p-3 bg-white w-100"> <FormGroup row> <Input.Label htmlFor="formGroupExampleInput" fontSize="lg">Default </Input.Label> <Input type="text" className="focus active form-control" id="formGroupExampleInput" placeholder="Focus text Input" /> </FormGroup> <FormGroup row> <Input.Label htmlFor="formGroupExampleInput3" fontSize="sm">Small</Input.Label> <Input type="text" className="focus form-control-sm form-control " id="formGroupExampleInput3" placeholder="Focus text Input" /> </FormGroup> </form> </div>

<div className="prism-docs__component-demo">
  <form className="p-3 bg-white w-100">
    <FormGroup row>
      <Input.Label htmlFor="formGroupExampleInput" fontSize="lg">Default </Input.Label>
      <Input
        type="text"
        className="focus active form-control"
        id="formGroupExampleInput"
        placeholder="Focus text  Input"
      />
    </FormGroup>
    <FormGroup row>
      <Input.Label htmlFor="formGroupExampleInput3" fontSize="sm">Small</Input.Label>
      <Input type="text" className="focus form-control-sm form-control " id="formGroupExampleInput3" placeholder="Focus text  Input" />
    </FormGroup>
  </form>
</div>

Result

Loading...

Validation

Live Editor

<div className="prism-docs__component-demo"> <form className="p-3 bg-white w-100 "> <FormGroup row> <Input.Label htmlFor="formGroupExampleInput" fontSize="lg">Default</Input.Label> <Input valid type="text" className="is-valid form-control" placeholder="Input Valid" /> </FormGroup> <FormGroup row> <Input.Label htmlFor="formGroupExampleInput3" fontSize="sm">Small</Input.Label> <Input size='sm' invalid type="text" className="is-invalid form-control" placeholder="Input Invalid" /> </FormGroup> </form> </div>

<div className="prism-docs__component-demo">
  <form className="p-3 bg-white w-100 ">
    <FormGroup row>
      <Input.Label htmlFor="formGroupExampleInput" fontSize="lg">Default</Input.Label>
      <Input
        valid
        type="text"
        className="is-valid  form-control"
        placeholder="Input Valid"
      />
    </FormGroup>
    <FormGroup row>
      <Input.Label htmlFor="formGroupExampleInput3" fontSize="sm">Small</Input.Label>
      <Input
        size='sm'
        invalid
        type="text"
        className="is-invalid  form-control"
        placeholder="Input Invalid"
      />
    </FormGroup>
  </form>
</div>

Result

Loading...

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.

Live Editor

<div className="prism-docs__component-demo"> <Form className="p-3 bg-white w-100"> <FormGroup> <Input.Interactive type="password" iconLeft="prism-icon-user icon" onClickLeft={() => console.log('onclick left')} id="formGroupExamplePassword" placeholder="Enter your password" /> </FormGroup> <FormGroup> <Input.Interactive iconBefore="prism-icon-filter icon cursor-pointer " onClickBefore={() => console.log('onclick before')} iconLeft="prism-icon-user icon" onClickLeft={() => console.log('onclick left')} type="text" id="formGroupExampleInput" placeholder="Icons before and left" /> </FormGroup> <Input.Interactive iconRight="prism-icon-search icon" onClickRight={() => console.log('onclick right')} iconAfter="prism-icon-filter icon " onClickAfter={() => console.log('onclick after')} type="text" id="formGroupExampleInput" placeholder="icons right and after" /> </Form> </div>

<div className="prism-docs__component-demo">
  <Form className="p-3 bg-white w-100">
    <FormGroup>
      <Input.Interactive
        type="password"
        iconLeft="prism-icon-user icon"
        onClickLeft={() => console.log('onclick left')}
        id="formGroupExamplePassword"
        placeholder="Enter your password"
      />
    </FormGroup>
    <FormGroup>
      <Input.Interactive
        iconBefore="prism-icon-filter icon cursor-pointer "
        onClickBefore={() => console.log('onclick before')}
        iconLeft="prism-icon-user icon"
        onClickLeft={() => console.log('onclick left')}
        type="text"
        id="formGroupExampleInput"
        placeholder="Icons before and left"
      />
    </FormGroup>
    <Input.Interactive
      iconRight="prism-icon-search icon"
      onClickRight={() => console.log('onclick right')}
      iconAfter="prism-icon-filter icon "
      onClickAfter={() => console.log('onclick after')}
      type="text"
      id="formGroupExampleInput"
      placeholder="icons right and after"
    />
  </Form>
</div>

Result

Loading...

Number Input

Live Editor

<Form className="input-demo__card px-1 py-1 bg-white container"> <FormGroup row className="text-center pb-2"> <Col> <Input.Label className="mb-1" fontSize="lg">Number Input</Input.Label> <Input.Number onChange={event => console.log(event)} className="mx-auto" min={0} max={5} /> </Col> </FormGroup> </Form>

<Form className="input-demo__card px-1 py-1 bg-white container">
  <FormGroup row className="text-center pb-2">
    <Col>
      <Input.Label className="mb-1" fontSize="lg">Number Input</Input.Label>
      <Input.Number
        onChange={event => console.log(event)}
        className="mx-auto"
        min={0}
        max={5}
      />
    </Col>
  </FormGroup>
</Form>

Result

Loading...

Textarea Counter

Live Editor

<Form className="input-demo__card px-1 py-1 bg-white container"> <FormGroup row className="pb-2"> <Col> <Input.Label fontSize="lg">Default</Input.Label> <Input.TextCounter placeholder="Text area with characters remaining counter" maxLength={10} rows="4" /> </Col> </FormGroup> </Form>

<Form className="input-demo__card px-1 py-1 bg-white container">
  <FormGroup row className="pb-2">
    <Col>
    <Input.Label fontSize="lg">Default</Input.Label>
      <Input.TextCounter
        placeholder="Text area with characters remaining counter"
        maxLength={10}
        rows="4"
      />
    </Col>
  </FormGroup>
</Form>

Result

Loading...

Phone Number Input

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

Live Editor

<> <Input.Phone id="inputPhoneDefault" label="PhoneInput" placeholder="Enter Phone" /> <Input.Interactive id="inputPhoneInteractive" label="InteractiveInput" placeholder="Enter Phone" type="phone" /> </>

<>
  <Input.Phone
    id="inputPhoneDefault"
    label="PhoneInput"
    placeholder="Enter Phone"
  />
  <Input.Interactive
    id="inputPhoneInteractive"
    label="InteractiveInput"
    placeholder="Enter Phone"
    type="phone"
  />
</>

Result

Loading...

Readonly Inputs

Any input component can be made readonly by providing the readonly prop

Live Editor

<Form className="input-demo__card px-1 py-1 bg-white container"> <FormGroup> <Input.Label fontSize="lg">Input & Interactive Input</Input.Label> <Input readonly value="text input" /> <Input.Interactive iconRight="prism-icon-search icon" value="interactive input text" readonly /> </FormGroup> <FormGroup> <Input.Label fontSize="lg">Password Input</Input.Label> <Input.Password readonly /> </FormGroup> <FormGroup> <Col> <Input.Label fontSize="lg">Number Input</Input.Label> <Input.Number readonly /> </Col> </FormGroup> <FormGroup> <Input.Label fontSize="lg">Text Counter</Input.Label> <Input.TextCounter readonly /> </FormGroup> <FormGroup> <Input.Label fontSize="lg">Phone Number Input</Input.Label> <Input.Phone placeholder="Enter your phone number" readonly /> </FormGroup> </Form>

<Form className="input-demo__card px-1 py-1 bg-white container">
  <FormGroup>
    <Input.Label fontSize="lg">Input & Interactive Input</Input.Label>
    <Input readonly value="text input" />
    <Input.Interactive iconRight="prism-icon-search icon" value="interactive input text" readonly />
  </FormGroup>
  <FormGroup>
    <Input.Label fontSize="lg">Password Input</Input.Label>
    <Input.Password readonly />
  </FormGroup>
  <FormGroup>
    <Col>
      <Input.Label fontSize="lg">Number Input</Input.Label>
      <Input.Number readonly />
    </Col>
  </FormGroup>
  <FormGroup>
    <Input.Label fontSize="lg">Text Counter</Input.Label>
    <Input.TextCounter readonly />
  </FormGroup>
  <FormGroup>
    <Input.Label fontSize="lg">Phone Number Input</Input.Label>
    <Input.Phone placeholder="Enter your phone number" readonly />
  </FormGroup>
</Form>

Result

Loading...

Additionally, the contents of a FormGroup or InputGroup can be made readonly by providing the readonly prop

Live Editor

<Form className="input-demo__card px-1 py-1 bg-white container"> <FormGroup readonly> <Input.Label fontSize="lg">Input & Interactive Input</Input.Label> <Input value="text input" /> <Input.Interactive iconRight="prism-icon-search icon" value="interactive input text" /> </FormGroup> </Form>

<Form className="input-demo__card px-1 py-1 bg-white container">
  <FormGroup readonly>
    <Input.Label fontSize="lg">Input & Interactive Input</Input.Label>
    <Input value="text input" />
    <Input.Interactive iconRight="prism-icon-search icon" value="interactive input text" />
  </FormGroup>
</Form>

Result

Loading...

Live Editor

<Form className="input-demo__card px-1 py-1 bg-white container"> <InputGroup readonly> <FormGroup> <Input.Label fontSize="lg">Input & Interactive Input</Input.Label> <Input value="text input" /> <Input.Interactive iconRight="prism-icon-search icon" value="interactive input text" /> </FormGroup> </InputGroup> </Form>

<Form className="input-demo__card px-1 py-1 bg-white container">
  <InputGroup readonly>
    <FormGroup>
      <Input.Label fontSize="lg">Input & Interactive Input</Input.Label>
      <Input value="text input" />
      <Input.Interactive iconRight="prism-icon-search icon" value="interactive input text" />
    </FormGroup>
  </InputGroup>
</Form>

Result

Loading...

Input Props

Name	Type	Default	Description
autoFocus	bool	false	Establishes the autofocus attr on the input element
children	node	null
type	string	"text"	Sets the type of input to display
size	string	lg	Sets the input size to small (sm) or large (lg)
valid	bool	false	Displays the styles for a valid text input
invalid	bool	false	Displays the styles for an invalid text input
tag	string	"input"
className	string	"form-control"	Sets a custom class name on the input
plain-text	string	null
placeholder	string	null	Sets the input placeholder text
disabled	bool	false	Disables input and applies disabled styles
readonly	bool	false	Applies readonly state

InteractiveInput Props

Name	Type	Default	Description
type	string	"text"	Sets the type of input
min	number	0	Sets the minimum number of characters input
iconBefore	string	null	Displays an icon before the input text
onClickBefore	function	null
iconLeft	string	null
onClickLeft	function	null
iconRight	string	null	Displays an icon before the input text
onClickRight	function	null
iconAfter	string	null
onClickAfter	function	null
readonly	bool	false	Applies readonly state

Siblings

Label Props

Name	Type	Default	Description
children	node	required
tag	string	"label"
className	string	"form-control"
for	string	null
fontSize	smorlg	null

FormGroup Props

Name	Type	Default	Description
inline	bool	null
disabled	bool	false
tag	string	"div"
readonly	bool	false	Applies readonly state to all children

Variants

NumberInput Props

Name	Type	Default	Description
label	string	null
min	number	0
max	number	10
className	string	null
onChange	func	null
readonly	bool	false	Applies readonly state

PhoneInput Props

Name	Type	Default	Description
aria-label	string	null
className	string	null
icon	bool	true
label	string	null
invalid	bool	false
label	string	''
readonly	bool	false	Applies readonly state