Input

An input field that users can type into.

import { Input } from "@nulogy/components";

<Input id="input" labelText="Input label" />

Use when

  • Users need to enter information that is best communicated in text form.
  • You need to collect information that varies from one user to another and can’t be represented as a set of pre-determined choices.

Variations

Disabled

<Input id="disabled-input" placeholder="I'm an input" disabled />

Error

Error message

<Input labelText="Label" id="error-input" errorMessage="Error message" />

With all labels

<Input
  id="all-labels"
  labelText="Label"
  helpText="Additional help text"
  requirementText="(Optional)"
  placeholder="I'm an input"
/>

With Prefix and Suffix

<Input
  id="all-labels"
  labelText="Label"
  placeholder="I'm an input"
  prefix="I'm prefix label"
  suffix="I'm sufix label"
/>

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

NameTypeDefaultDescription

value

String

undefined

Value of input, used when controlling the component

defaultValue

String

Default value of input

id

String

null

A unique ID for this input

name

String

undefined

A unique name for this input

disabled

Boolean

false

Marks the field as disabled and disallows user input

helpText

Node

null

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.

labelText

String

null

Informs users what the corresponding input field is for.

placeholder

String

null

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

required

Boolean

false

Makes the field require selection before the form will submit.

requirementText

String

null

(Optional) or (Required).

className

String

undefined

className passed to the wrapper element.

onChange

Function

undefined

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

onBlur

Function

undefined

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

errorMessage

String

null

Displays list of error messages and applies red style

errorList

Array of Strings

null

Displays list of error messages and applies red style

prefix

String

null

Displays input field prefix label

prefixWidth

String

null

Controls the width of prefix label

prefixAlignment

String

left

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

suffix

String

null

Displays input field suffix label

suffixWidth

String

null

Controls the width of suffix label

suffixAlignment

String

left

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

Related components