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/public/components/Textbox.css';

Props

Examples

Deep import.
import Textbox from 'device-agnostic-ui/public/components/Textbox.js';
Deep require.
const Textbox = require('device-agnostic-ui/public/components/Textbox');
Index import. Convenient, but technically inferior to a deep import.
import { Textbox } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Textbox } = require('device-agnostic-ui');
A text input with a placeholder.
import { Textbox } from 'device-agnostic-ui';

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

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

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

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

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

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

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

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

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

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

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

Tags