Input

The Input component displays a text-based input field.

1
import {
2
  Field,
3
  Input,
4
} from '@cerberus/react'

Usage

The Input component displays a text-based input field.

Enter your email

We'll never share your email with anyone else.

Invalid example

A name is required to submit this form. It replaces the helper text.

Anything else you want to tell us?

This will help us learn more about you.0/300

You can utilize the startIcon or endIcon props to add icons to the input.

You can customize the input by passing styles directly into the component. The Input is a re-export of the FieldInput primitive.

Custom LabelCustom Helper Text

The Input accepts the following props in addition to any native input props:

Name	Default	Description
startIcon		An `ElementType` to display at the start of the input
endIcon		An `ElementType` to display at the end of the input
size		This size variant of the input

The Input component also accepts any of the props from the FieldParts.Input primitive.

On this page