Text Input

Accepts variable amounts of freeform user input.

Examples

Basic Text Input

The most basic form field around! Available in two sizes.

Label

Required

Label

Required

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  required
  label="Label"
  placeholder="Placeholder"
  id="default-input"
  size="{sm|md(default)}" 
/>

With Helper Text

More context, like an error message, can be provided via the helperText prop.

Label

Helper Text

Label

Helper Text

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  ... 
  helperText="Helper Text" 
/>

Critical, Warning, Success, and Disabled States

There are four additional states the TextInput can be in, to indicate danger, warning, success or the inability to be controlled.

Label

Some kind of error

Label

Some kind of error

Label

Some kind of warning

Label

Some kind of warning

Label

Some kind of success

Label

Some kind of success

Label

No touching!

Label

No touching!

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  ...
  state="{critical|warning|success}"
  disabled
/>

Critical, Warning, Success, and Disabled States with Icons

When an Icon is used at the start of the input, it will be swapped out depending on error state.

Label

Some kind of error

Label

Some kind of error

Label

Some kind of warning

Label

Some kind of warning

Label

Some kind of success

Label

Some kind of success

Label

No touching!

Label

No touching!

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  ...
  iconStart={<EditIcon />}
  state="{critical|warning|success}"
  disabled
/>

With a Multiline Input

A textarea will be rendered instead of an input if the multiline prop is passed. Additionally, passing a number to rows will increase the height of the input.

Label

Label

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  ...
  multiline
  rows="5"
/>

With a Multiline Input and Highlight

Another additional piece of text can be provided via the highlight prop.

Label - Default

Highlight text.

Label - Warning

Highlight text.

Label - Critical

Highlight text.

Label - Success

Highlight text.

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  ...
  multiline
  highlight="Highlight text."
/>

With Icons

Optional leading or trailing icons can be provided.

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

Label

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  ...
  iconStart={<PlaceholderIcon />}
  iconEnd={<PlaceholderIcon />}
/>

Controlled Text Input

Like all form inputs, a TextInput can either be uncontrolled, or controlled (by providing a value and onChange listener).

Label

Required

Label

Required

import { TextInput } from '@curology/ui-components-web/react/TextInput';

<TextInput 
  value={someValue}
  onChange={(evt, value) => ...}
/>

Props

TextInputProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
highlight	ReactNode		No	Highlighted helper text to display at the bottom of the multiline text input
highlightClassName	string		No	A className to apply to the highlight.
iconEnd	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the end of the input.
iconStart	ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any>		No	An icon to render at the front of the input.
label	ReactNode		No	A string or component to display as a label above the input
multiline	false | true	false	No	Should a textarea be used instead of an input?
onChange	FormControlChangeEventHandler		No	Emit a new value when the input's selected value changes.
required	false | true	false	No	Is the field required?
resize	false | true	false	No	Can the textarea be resized?
rows	string | number		No	How many rows call should the multiline input be?
size	"md" | "sm"	'md'	No	The size of the field
state	"" | "critical" | "warning" | "success"	''	No	The state of the field