Input

An input field that users type into.


labelText
disabled
required
onChange
onBlur
errorList
prefixAlignment
suffixAlignment

Variations

Disabled

Error

With prefix and suffix

Props

NameTypeDefaultDescription

value

string

Value of input, used when controlling the component

labelText

react node

Informs users what the corresponding input field is for.

disabled

boolean

false

Marks the field as disabled and disallows user input

required

boolean

false

Makes the field require selection before the form will submit.

helpText

string

Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.

placeholder

string

A hint to the expected format for the field. Not a replacement for a label.

defaultValue

string

Default value of input

requirementText

string

(Optional) or (Required).

onChange

function

Change event handler that will be run whenever the value of the input is updated.

onBlur

function

Change event handler that will be run whenever the input loses focus.

errorMessage

string

Displays an error message and applies red style

errorList

array

Displays list of error messages and applies red style

inputWidth

string

184px

css width of the input field

prefix

string

Displays input field prefix label

prefixWidth

string

Controls the width of prefix label

prefixAlignment

enum

left

Aligns prefix label text. Accepts left, center, and right value.

suffix

string

Displays input field suffix label

suffixWidth

string

Controls the width of suffix label

suffixAlignment

enum

left

Aligns suffix label text. Accepts left, center, and right value.

id

string

A unique ID for this input

className

string

className passed to the wrapper element.

Content Guidelines

Whenever possible match the width of the input field with the expected length of the input. If that is not possible then fill the entire width of the container.

Props


The Nulogy Design System is maintained by the Design Ops team. Our mission is to help our teams build better interfaces faster. 🚀

Please reach out with any questions or requests.