Form controls

    Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

    Example

    For textual form controls—like inputs and textareas—use the FormControl component. FormControl adds some additional styles for general appearance, focus state, sizing, and more.

    Sizing

    Use size on <FormControl> to change the size of the input.

    Disabled

    Add the disabled prop on an input to give it a grayed out appearance and remove pointer events.

    Readonly

    Add the readOnly prop on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

    Readonly plain text

    If you want to have readonly elements in your form styled as plain text, use the plaintext prop on FormControls to remove the default form field styling and preserve the correct margin and padding.

    File input

    Color

    API

    Form.Controlview source file

    import Form from 'react-bootstrap/Form'Copy import code for the Form component
    NameTypeDefaultDescription
    ref
    ReactRef

    The FormControl ref will be forwarded to the underlying input element, which means unless as is a composite component, it will be a DOM node, when resolved.

    as
    'input' | 'textarea' | elementType
    'input'

    The underlying HTML element to use when rendering the FormControl.

    disabled
    boolean

    Make the control disabled

    htmlSize
    number

    The size attribute of the underlying HTML element. Specifies the visible width in characters if as is 'input'.

    id
    string

    Uses controlId from <FormGroup> if not explicitly specified.

    isInvalid
    boolean
    false

    Add "invalid" validation styles to the control and accompanying label

    isValid
    boolean
    false

    Add "valid" validation styles to the control

    onChange
    function

    A callback fired when the value prop changes

    plaintext
    boolean

    Render the input as plain text. Generally used along side readOnly.

    readOnly
    boolean

    Make the control readonly

    size
    'sm' | 'lg'

    Input size variants

    type
    string

    The HTML input type, which is only relevant if as is 'input' (the default).

    value
    string | arrayOf | number
    controlled by: onChange, initial prop: defaultValue

    The value attribute of underlying input

    bsPrefix
    string
    {'form-control'}

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.