Text Field

A simple text field component. Accept all props of a regular input element.

The TextField extends the TextInput element by adding label, description and validation variants.

A text field

---

Usage

import { TextField } from "@newfold/ui-component-library";

<TextField
    id="text-field-demo"
    label="A text field"
    onChange={(e) => console.log(e.target.value)}
/>

---

HTML Attributes

Since the TextField component is a wrapper around a regular input element, all attributes of a regular input element are accepted.

For example, here's an input type number with a placeholder.

A number input

<TextField
    id="text-field-html-attributes"
    label="A number input"
    onChange={(e) => console.log(e.target.value)}
    type="number"
    placeholder="Enter a number"
/>

---

Label

Use the label prop to add a label to the component.

Text field label 👋

<TextField
    id="text-field-label"
    label="Text field label 👋"
    onChange={(e) => console.log(e.target.value)}
/>

---

Description

Use the description prop to add a description to the component.

Text field label 👋

Text field description 🙌

<TextField
    id="text-field-description"
    label="Text field label 👋"
    description="Text field description 🙌"
    onChange={(e) => console.log(e.target.value)}
/>

---

Disabled

Use the disabled prop to disable the component.

Disabled text field

<TextField
    id="text-field-disabled"
    label="Website Address"
    onChange={(e) => console.log(e.target.value)}
    type="url"
    placeholder="https://www.example.com"
    disabled={true}
/>

---

Read Only

You can make the input read only by passing the readOnly prop.

Read only text field

<TextField
    id="text-field-readonly"
    label="Read only text field"
    type="url"
    value="https://maze.toys/mazes/mini/daily/"
    onChange={(e) => console.log(e.target.value)}
    readOnly
/>

---

Validation

Use the validation prop to add validation to the TextField component. The TextField provides four validation variants: success, warning, info, and error.

Success

Success variant

Success unlocked. Keep soaring!

<TextField 
    id="text-field-success"
    label="Success variant"
    onChange={(e) => console.log(e.target.value)}
    validation={{
        variant: "success",
        message: "Success unlocked. Keep soaring!"
    }}
/>

Warning

Warning variant

Caution: Proceed with care to avoid potential pitfalls.

<TextField 
    id="text-field-warning"
    label="Warning variant"
    onChange={(e) => console.log(e.target.value)}
    validation={{
        variant: "warning",
        message: "Caution: Proceed with care to avoid potential pitfalls."
    }}
/>

Info

Info variant

Information: Knowledge is the key to empowerment.

<TextField 
    id="text-field-info"
    label="Info variant"
    onChange={(e) => console.log(e.target.value)}
    validation={{
        variant: "info",
        message: "Information: Knowledge is the key to empowerment."
    }}
/>

Error

Error variant

Error: Unable to proceed without required input.

<TextField 
    id="text-field-error"
    label="Error variant"
    onChange={(e) => console.log(e.target.value)}
    validation={{
        variant: "error",
        message: "Error: Unable to proceed without required input."
    }}
/>

---

Props

Attribute	Type	Description	Default
id*	string |	ID for the text field.	-
label*	string |	Label for the text field.	-
onChange*	function |	Callback function when the value of the text field changes. The function will receive the event as a parameter.	-
labelSuffix	node |	Content to display after the label.	-
type	string |	The type of the input.	text
description	string |	Description for the text field.	-
validation	{ variant: string, message: node } |	Validation state and message	-
disabled	bool |	-	false
readOnly	bool |	-	false
className	string |	-	-