Input

The Input component displays a text-based input field.

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

Usage

The Input component displays a text-based input field.

import { Field, Input, Textarea } from '@cerberus/react'
import { Box, VStack } from 'styled-system/jsx'

export function BasicFieldPreview() {
  return (
    <form action={someAction} method="post">
      <Box w="1/2">
        <VStack alignItems="flex-start" gap="lg" w="full">
          <Field
            label="Enter your email"
            helperText="We'll never share your email with anyone else."
            required
          >
            <Input name="email" type="email" />
          </Field>
          <Field
            label="Invalid example"
            helperText="This is an example of an invalid field."
            errorText="A name is required to submit this form. It replaces the helper text."
            invalid
            required
          >
            <Input name="invalid-name" type="text" />
          </Field>
          <Field
            label="Anything else you want to tell us?"
            helperText="This will help us learn more about you."
            secondaryHelperText="0/300"
          >
            <Textarea name="message" />
          </Field>
        </VStack>
      </Box>
    </form>
  )
}

With Icons

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

import { Field, Input } from '@cerberus/react'
import { Search } from '@carbon/icons-react'
import { VStack } from 'styled-system/jsx'

export function SearchInputExample() {
  return (
    <VStack gap="md" w="1/2">
      <Field>
        <Input startIcon={<Search />} placeholder="Search for anything" />
      </Field>
      <Field>
        <Input endIcon={<Search />} placeholder="Search for anything" />
      </Field>
      <Field invalid>
        <Input endIcon={<Search />} placeholder="Search for anything" />
      </Field>
    </VStack>
  )
}

Note

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

Customizing

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

import { FieldParts } from '@cerberus/react'
import { Box } from 'styled-system/jsx'

export function CustomField() {
  return (
    <Box w="1/2">
      <FieldParts.Root>
        <FieldParts.Label
          css={{
            fontSize: 'xl',
            fontWeight: 'black',
            textTransform: 'uppercase',
          }}
        >
          Custom Label
        </FieldParts.Label>
        <FieldParts.Input
          css={{
            transform: 'skewX(-10deg)',
          }}
          type="text"
        />
        <FieldParts.HelperText
          css={{
            fontStyle: 'italic',
          }}
        >
          Custom Helper Text
        </FieldParts.HelperText>
      </FieldParts.Root>
    </Box>
  )
}

API

Props

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

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

import { Field, Input, Textarea } from '@cerberus/react'
import { Box, VStack } from 'styled-system/jsx'

export function BasicFieldPreview() {
  return (
    <form action={someAction} method="post">
      <Box w="1/2">
        <VStack alignItems="flex-start" gap="lg" w="full">
          <Field
            label="Enter your email"
            helperText="We'll never share your email with anyone else."
            required
          >
            <Input name="email" type="email" />
          </Field>
          <Field
            label="Invalid example"
            helperText="This is an example of an invalid field."
            errorText="A name is required to submit this form. It replaces the helper text."
            invalid
            required
          >
            <Input name="invalid-name" type="text" />
          </Field>
          <Field
            label="Anything else you want to tell us?"
            helperText="This will help us learn more about you."
            secondaryHelperText="0/300"
          >
            <Textarea name="message" />
          </Field>
        </VStack>
      </Box>
    </form>
  )
}