Input

An input field that users type into.

value

labelText

Label

Label

disabled

required

helpText

placeholder

defaultValue

requirementText

onChange

(e) => console.log('changed!', e)

(e) => console.log('changed!', e)

onBlur

(e) => console.log('blurred!', e)

(e) => console.log('blurred!', e)

errorMessage

errorList

inputWidth

prefix

prefixWidth

prefixAlignment

left

center

right

suffix

suffixWidth

suffixAlignment

left

center

right

className

import * as React from "react";
import { Input } from "@nulogy/components";

export default () => {
  return (
    <Input
      value="123.99"
      labelText="Label"
      helpText="Some help text"
      requirementText="(Required)"
      onChange={e => console.log("changed!", e)}
      onBlur={e => console.log("blurred!", e)}
    />
  );
}

import * as React from "react";
import { Input } from "@nulogy/components";

export default () => {
  return (
    <Input
      value="123.99"
      labelText="Label"
      helpText="Some help text"
      requirementText="(Required)"
      onChange={e => console.log("changed!", e)}
      onBlur={e => console.log("blurred!", e)}
    />
  );
}

Variations

Disabled

Error

With prefix and suffix

Props

Name	Type	Default	Description
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.