Text Input

Usage

No props are required to display <TextInput>, but it’s recommended to provide a label for accessibility.

Username

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

export default () => <TextInput label="Username" />;

Help text

To display additional info beneath the input, pass in helpText.

Username

Choose a unique username.

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

export default () => (
  <TextInput label="Username" helpText="Choose a unique username." />
);

Sizing

When displaying an input in a space-constrained location, you can pass small, which decreases the padding and font size.

Username

Choose a unique username.

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

export default () => (
  <TextInput label="Username" helpText="Choose a unique username." small />
);

Dark mode

To display the text input on a dark background, pass darkMode.

Username

Choose a unique username.

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

export default () => (
  <TextInput label="Username" helpText="Choose a unique username." darkMode />
);

Errors

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

Username

This username is already taken.

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

export default () => (
  <TextInput
    label="Username"
    helpText="This username is already taken."
    error
  />
);

Placeholders

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

Username

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

export default () => (
  <TextInput label="Username" placeholder="e.g., johndoe123" />
);

Accessibility

In general, avoid placeholder text. Placeholders can pose accessibility issues by making an empty form field look filled. Never use placeholder text to display instructions, since placeholder text disappears once the user types into the input.

For more information, see The Anatomy of Accessible Forms: The Problem with Placeholders.

Disabled

Username

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

export default () => <TextInput label="Username" disabled />;

Icons

You can add icons to the left or right side of the input using iconLeft or icon props respectively.

Username

import { TextInput } from "stylus-ui/TextInput";
import { faUser, faCheck } from "@fortawesome/pro-solid-svg-icons";

export default () => (
  <TextInput label="Username" iconLeft={faUser} icon={faCheck} />
);

Full Width

To make the input take up the full width of its container, use the fullWidth prop.

Username

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

export default () => <TextInput label="Username" fullWidth />;

Clearable

To add a clear button that appears when the input has a value, use the onClear prop.

Username

import { TextInput } from "stylus-ui/TextInput";
import { useState } from "react";

export default () => {
  const [value, setValue] = useState("");
  return (
    <TextInput
      label="Username"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onClear={() => setValue("")}
    />
  );
};

API Reference

TextInput

Inherits properties from HTMLInputElement.

Prop	Type	Default
darkMode	boolean	false
disabled	boolean	false
error	boolean	false
fullWidth	boolean	false
helpText	string
icon	IconProp
iconLeft	IconProp
iconProps	Omit<FontAwesomeIconProps, 'icon'>
label	string
onClear	() => void
small	boolean	false