Skip to content
<hrc />

@hrc/input

Simple input components for your React app

Demo generated with code from Usage section

Installation

Terminal window
npm install @hrc/input

Usage

import { useState } from "react";
import { Input, Textarea, Checkbox, Radio, RadioGroup } from "@hrc/input";
import { Icon } from "@hrc/material-icons";


export function PackageDemo() {
  const [hasNewsletter, setHasNewsletter] = useState(false);


  return (
    <>
      <Input
        label="Username"
        placeholder="John Doe"
        iconStart={<Icon name="people" />}
      />
      <Textarea label="Comment" placeholder="Hello world" color="secondary" />
      <Checkbox
        label="Receive newsletter"
        color="success"
        checked={hasNewsletter}
        onChange={(e) => setHasNewsletter(e.target.checked)}
      />
      <RadioGroup
        name="newsletter-frequency"
        defaultValue="weekly"
        disabled={!hasNewsletter}
      >
        <Radio label="Daily" value="daily" />
        <Radio label="Weekly" value="weekly" />
        <Radio label="Bi-weekly" value="bi-weekly" />
      </RadioGroup>
    </>
  );
}

Demos

For examples and details on the usage of the components, see the demo pages:

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for input components: