Black Lives Matter.  Support the Equal Justice Initiative.
Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub

Input

Base Input component that enables users to enter text values. Do not forget to provide accessible names for your inputs. Or consider using FormInput together with FormLabel within Forms.

#Installation

npm install reakit

Learn more in Get started.

#Usage

import { Input } from "reakit/Input";

function Example() {
  return <Input placeholder="input" />;
}

#Styling

Reakit components are unstyled by default. You're free to use whatever approach you want. Each component returns a single HTML element that accepts all HTML props, including className and style.

The example below uses Emotion. But these styles can be reproduced using static CSS and other CSS-in-JS libraries, such as styled-components.

import { Input } from "reakit/Input";
import { css } from "emotion";

const className = css`
  display: block;
  width: 100%;
  border-radius: 0.2rem;
  padding: 0.5em 0.75em;
  font-size: 100%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  color: #4d4d4d;
  margin: 0 !important;
  box-sizing: border-box;

  &:focus {
    border-color: rgba(0, 0, 0, 0.25);
  }
`;

function Example() {
  return <Input className={className} value="value" placeholder="input" />;
}

Learn more in Styling.

#Composition

Learn more in Composition.

#Props

#Input

  • disabled boolean | undefined

    Same as the HTML attribute.

  • focusable boolean | undefined

    When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.