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

• Input uses Tabbable, and is used by FormInput and all their derivatives.

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.