Input

Default input

With labelRequired *

Show code

default.tsx

import { Input } from "@hrc/input";

export function InputDefault() {
  return (
    <>
      <Input placeholder="Hello world" />
      <Input label="With label" placeholder="Hello world" />
      <Input label="Required" placeholder="Hello world" required />
    </>
  );
}

Colors

Use the color prop to change the color of the input.

PrimarySecondaryErrorInfoWarningSuccess

Show code

colors.tsx

import { Input } from "@hrc/input";

const colors = [
  "primary",
  "secondary",
  "error",
  "info",
  "warning",
  "success",
] as const;

const toTitleCase = (str: string) => `${str[0].toUpperCase()}${str.slice(1)}`;

export function InputColors() {
  return colors.map((color) => (
    <Input
      key={`input-${color}`}
      color={color}
      label={`${toTitleCase(color)}`}
      placeholder="Hello world"
      // the following classnames are only for demo purposes
      className="input--focused"
      labelClassName="label--focused"
    />
  ));
}

Disabled

Add the disabled prop to disable the input.

toggle_offDisabledWith label

Show code

disabled.tsx

import { useState } from "react";
import { Input } from "@hrc/input";
import { ToggleDisabled } from "./ToggleDisabled";

export function InputDisabled() {
  const [disabled, setDisabled] = useState(false);

  return (
    <>
      <ToggleDisabled disabled={disabled} setter={setDisabled} />

      <Input placeholder="Hello world" disabled={disabled} />
      <Input label="With label" placeholder="Hello world" disabled={disabled} />
    </>
  );
}

ToggleDisabled.tsx

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

type Props = {
  disabled: boolean;
  setter: (disabled: boolean) => void;
};

export function ToggleDisabled({ disabled, setter }: Props) {
  return (
    <Button
      color={disabled ? "info" : undefined}
      onClick={() => setter(!disabled)}
      className="toggle-disabled"
    >
      <Icon name={disabled ? "toggle_on" : "toggle_off"} />
      Disabled
    </Button>
  );
}

Sizes

Set the size prop or set the fullWidth prop to change the size of the input.

SmallDefaultFull width

Show code

sizes.tsx

import { Input } from "@hrc/input";

export function InputSizes() {
  return (
    <>
      <Input label="Small" placeholder="Hello world" size="small" />
      <Input label="Default" placeholder="Hello world" />
      <Input label="Full width" placeholder="Hello world" fullWidth />
    </>
  );
}

With Icons

You can add icons to the input using the iconStart and iconEnd props.

Icon startpeopleIcon endphone

Show code

icons.tsx

import { Input } from "@hrc/input";
import { Icon } from "@hrc/material-icons";

export function InputWithIcons() {
  return (
    <>
      <Input
        label="Icon start"
        iconStart={<Icon name="people" />}
        placeholder="Hello world"
      />
      <Input
        label="Icon end"
        iconEnd={<Icon name="phone" />}
        placeholder="Hello world"
      />
    </>
  );
}

With Helper Text

Use the helperText prop to add helper text to the input.

Helper textHelper text

Show code

helper-text.tsx

import { Input } from "@hrc/input";

export function InputWithHelperText() {
  return (
    <>
      <Input size="small" placeholder="Hello world" helperText="Helper text" />
      <Input placeholder="Hello world" helperText="Helper text" />
    </>
  );
}

With Error

Use the error prop to indicate an error state.

With error *Helper textWith errordescriptionInvalid entryWith error (disabled)descriptionInvalid entry

Show code

error.tsx

import { Input } from "@hrc/input";
import { Icon } from "@hrc/material-icons";

export function InputWithError() {
  return (
    <>
      <Input
        label="With error"
        placeholder="Hello world"
        helperText="Helper text"
        required
        error
      />
      <Input
        label="With error"
        placeholder="Hello world"
        helperText="Invalid entry"
        iconStart={<Icon name="description" />}
        error
      />
      <Input
        label="With error (disabled)"
        placeholder="Hello world"
        helperText="Invalid entry"
        iconEnd={<Icon name="description" disabled />}
        disabled
        error
      />
    </>
  );
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <Input />:

• <Input />