Text Input

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

Usage

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

<TextInput />

---

HTML Attributes

Since the Text Input 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 and an id.

<TextInput 
    type="number"
    placeholder="Enter a number"
    id="number-input"
/>

---

Label

You can use the Label component to add a label to your text input.

Your lucky number:

import { Label, TextInput } from "@newfold/ui-component-library";

<Label 
    htmlFor="number-input-label"
    label="Your lucky number:"
    className="nfd-cursor-pointer"
/>
<TextInput 
    type="number"
    placeholder="Enter a number"
    id="number-input-label"
    className="nfd-mt-2"
/>

---

Disabled

You can disable the text input by passing the disabled prop.

<TextInput 
    type="url"
    placeholder="Website URL"
    disabled={true}
/>

---

Read Only

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

<TextInput 
    type="url"
    value="https://maze.toys/mazes/mini/daily/"
    readOnly
/>

---

Props

Attribute	Type	Description	Default
type	string |	The type of the input.	text
disabled	bool |	-	false
readOnly	bool |	-	false
className	string |	-	-