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 />
);

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 icon or iconEnd props respectively.

Username

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

export default () => (
  <TextInput label="Username" icon={faUser} iconEnd={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

Accepts text input from users.

error

boolean = false

Show an error state with red outline and text.

---

fullWidth

boolean = false

Make the input span the full width of its container.

---

helpText

string

Helper or error text shown below the input.

---

icon

IconDefinition

Icon rendered at the start of the input.

---

iconEnd

IconDefinition

Icon rendered at the end of the input (e.g. clear button).

---

iconEndProps

Omit<Omit<IconProps, "ref"> & RefAttributes<SVGSVGElement>, "icon">

Props passed to the end icon.

---

iconProps

Omit<Omit<IconProps, "ref"> & RefAttributes<SVGSVGElement>, "icon">

Props passed to the start icon.

---

label

ReactNode

Label shown above the input.

---

onClear

() => void

Called when the user clears the input; used to show a clear button.

---

small

boolean = false

Use a smaller height and text size.

---