Input

Accepts text input from users.

Usage

import { Input } from "stylus-ui/Input";

export default () => <Input />;

Sizing

When displaying an input in a space-constrained location, you can pass small.

import { Input } from "stylus-ui/Input";

export default () => <Input small />;

Dark mode

To display inputs on a dark background, pass darkMode.

import { Input } from "stylus-ui/Input";

export default () => <Input darkMode />;

Errors

When displaying an error message, pass error to highlight the input in red.

import { Input } from "stylus-ui/Input";

export default () => <Input error />;

Labels

Most inputs should also provide a label for accessibility. Import <Label>.

Email address

import { Input } from "stylus-ui/Input";
import { Label } from "stylus-ui/Label";

export default () => (
  <Label className="flex flex-col gap-2">
    Email address
    <Input type="email" />
  </Label>
);

Placeholders

Placeholder text may be used to provide an example of input to the user.

Email address

import { Input } from "stylus-ui/Input";
import { Label } from "stylus-ui/Label";

export default () => (
  <Label className="flex flex-col gap-2">
    Email address
    <Input type="email" placeholder="alan@scribehow.com" />
  </Label>
);

Disabled

Email address

import { Input } from "stylus-ui/Input";
import { Label } from "stylus-ui/Label";

export default () => (
  <Label className="flex flex-col gap-2">
    Email address
    <Input type="email" placeholder="alan@scribehow.com" disabled />
  </Label>
);

API Reference

`Input`

Inherits properties from HTMLInputElement.

Prop	Type	Default
`className`	`string`
`darkMode`	`boolean`	`false`
`error`	`boolean`	`false`
`small`	`boolean`	`false`