Input

The RhInput component is a highly customizable component that enables users to input data.

Usage

Once installed, you can import the RhInput component into your React application:

copy

import {RhInput} from "@rhythm-ui/react"

Then, you can use the RhInput component in your JSX code:

copy

<RhInput type="text" placeholder="Sample Placeholder" />

Input Props

Name	Type	Description
block	boolean	Set whether to display input as block element
error	boolean	Set the input element's style to have a red highlight
inputSize	"sm" \| "lg" \| "md"	Set size of input
rows	number	Set no.of. rows need for the text area
className	string	Classname
ref	Ref<HTMLInputElement & HTMLTextAreaElement>	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	Key

Number

The type prop determines the type of input field, such as text, number, password, or email. Here we can see the input type number

copy

<RhInput type="number" placeholder="Type number here.." />

Size

The inputSize prop sets the size of the input field. We can set the size as sm or md or lg.

copy

<RhGrid container alignItems="items-center" spacing="md">
  <RhGrid item>
    <RhInput type="text" placeholder="Small" inputSize="sm" />
  </RhGrid>
  <RhGrid item>
    <RhInput type="text" placeholder="Medium" inputSize="md" />
  </RhGrid>
  <RhGrid item>
    <RhInput type="text" placeholder="Large" inputSize="lg" />
  </RhGrid>
</RhGrid>

Prefix Icon

The RhInputGroup component provides a way to customize the appearance of input fields by grouping them. We can use the RhInputGroup component to group RhIcon and RhInput components together, it is possible to add a prefix icon to the input field.

copy

<RhInputGroup>
  <RhIcon icon="heroicons:home-solid" className="text-lg text-gray-400" />
  <RhInput type="text" />
</RhInputGroup>

Suffix Icon

The RhInputGroup component to group RhInput and RhIcon components together, it is possible to add a Suffix icon to the input field, allowing for further customization.

copy

<RhInputGroup>
  <RhInput type="text" />
  <RhIcon icon="heroicons:home-solid" className="text-lg text-gray-400" />
</RhInputGroup>

Prefix Component

By using RhInputGroup we can prefix the component to the input.

copy

<div className="flex gap-2">
  <div>
    <RhInputGroup>
      <RhPopover>
        <RhPopoverToggle>
          <div className="flex items-center justify-between flex-nowrap">
            <span className="pr-1">Dropdown</span>
            <RhIcon
              icon="heroicons:chevron-down-solid"
              className="text-xl text-gray-400"
            />
          </div>
        </RhPopoverToggle>
        <RhPopoverMenu>
          <RhListContainer className="bg-white border">
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Dashboard" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Settings" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Earnings" />
            </RhListItem>
            <RhDivider />
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Separated Link" />
            </RhListItem>
          </RhListContainer>
        </RhPopoverMenu>
      </RhPopover>
      <RhInput type="text" />
      <RhIcon icon="heroicons:home-solid" className="text-lg text-gray-400" />
    </RhInputGroup>
  </div>
</div>

Suffix Component

Here we can see the suffix component to the input which is by using the RhInputGroup component.

copy

<RhInputGroup>
  <RhIcon icon="heroicons:home-solid" className="text-lg text-gray-400" />
  <RhInput type="text" />
  <RhPopover>
    <RhPopoverToggle>
      <RhGrid container alignItems="items-center">
        <RhGrid item>Dropdown</RhGrid>
        <RhGrid item container alignItems="items-center">
          <RhIcon
            className="ml-2 text-lg text-gray-400"
            icon="heroicons:chevron-down-solid"
          />
        </RhGrid>
      </RhGrid>
    </RhPopoverToggle>
    <RhPopoverMenu>
      <RhListContainer className="bg-white border">
        <RhListItem onClick={() => null}>
          <RhListItemText primary="Dashboard" />
        </RhListItem>
        <RhListItem onClick={() => null}>
          <RhListItemText primary="Settings" />
        </RhListItem>
        <RhListItem onClick={() => null}>
          <RhListItemText primary="Earnings" />
        </RhListItem>
        <RhDivider />
        <RhListItem onClick={() => null}>
          <RhListItemText primary="Separated Link" />
        </RhListItem>
      </RhListContainer>
    </RhPopoverMenu>
  </RhPopover>
</RhInputGroup>

Radio

The type prop with the value radio and checkbox. And we can pass specific props that are appropriate for this type of input.

copy

<div className="flex gap-4">
  <RhInput type="radio" name="demo" defaultChecked />
  <RhInput type="radio" name="demo" />
  <RhInput type="checkbox" name="demo" defaultChecked />
  <RhInput type="checkbox" name="demo" />
</div>