Looking for Reakit's successor?Visit Ariakit
Skip to main content


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.


npm install reakit

Learn more in Get started.


import { Input } from "reakit/Input";

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


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.


Learn more in Composition.



  • 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.

Powered by Vercel

Released under the MIT License

Copyright © 2017-2023 Diego Haz