Input

The Input component displays a text-based input field.

Import

import { Field, Input } from '@cerberus/react'

The Input component displays a text-based input field.

Loading example...

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

Loading example...

Note

When and input is marked as invalid, the endIcon will be replaced by the invalid icon.

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

Loading example...

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

import { Field, Input } from '@cerberus/react'

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

Loading example...

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

Loading example...

Note

When and input is marked as invalid, the endIcon will be replaced by the invalid icon.

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

Loading example...

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.