Input

Instead of HTML native controls, input, textarea.

  • <Input> The input box component.
  • <InputGroup> The input box combination component.
  • <InputGroup.Button> Combined with the button.
  • <InputGroup.Addon> Custom additional elements.

Import

import { Input, InputGroup } from 'rsuite';

// or
import Input from 'rsuite/lib/Input';
import InputGroup from 'rsuite/lib/InputGroup';

Examples

Default

Size

Textarea

Disabled and read only

Input Group

Inside

With Button

Password

With Tooltip

Props

<Input>

Property Type (Default) Description
classPrefix string ('input') The prefix of the component CSS class
defaultValue string Default value
disabled boolean Disabled component
onChange (value: string, event) => void The callback function in which value is changed.
size enum: 'lg', 'md', 'sm', 'xs' ('md') An input can have different sizes
type string ('text' ) HTML input type
value string Value (Controlled)

<InputGroup>

Property Type (Default) Description
classPrefix string ('input-group') The prefix of the component CSS class
inside boolean Sets the composition content internally
size enum: 'lg', 'md', 'sm', 'xs' ('md') An input group can have different sizes