Textbox

An input or textarea.

It implements the <input> or <textarea> element.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import "device-agnostic-ui/Textbox.css";

Props

Examples

How to import.
import Textbox from "device-agnostic-ui/Textbox.mjs";
A text input with a placeholder.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox placeholder="Placeholder" />;
A text input with text.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox defaultValue="Text" />;
A required text input.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox required />;
A text input with a custom validation message.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox validationMessage="Custom message." />;
A textarea.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox type="textarea" />;
A password input.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox type="password" />;
A number input.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox type="number" defaultValue="1" />;
An email input.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox type="email" defaultValue="me@jaydenseric.com" />;
A telephone number input.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox type="tel" defaultValue="0491 570 156" />;
A date input.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox type="date" defaultValue="2001-09-11" />;
A search input.
import Textbox from "device-agnostic-ui/Textbox.mjs";

const result = <Textbox type="search" defaultValue="Cats" />;

Tags