DocsBlog

  • 1.6.0

  • Day

    Night

    Preview

    Switch mode

  • Cerberus

    Acheron

    Elysium

    Oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMarqueeNotificationsNumber InputPaginationPin InputPopoverProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

On this page

Loading...

Loading...

Loading...

Loading...

Input

The Input component displays a text-based input field.

  • npm
  • source
  • recipe
  • Ark
    • import {
      Field,
      Input,
    } from '@cerberus/react'

    Usage

    The Input component displays a text-based input field.

    With Icons

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

    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.

    API

    Props

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

    NameDefaultDescription
    startIconAn to display at the start of the input

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

    ElementType
    endIconAn ElementType to display at the end of the input
    sizeThis size variant of the input
    We'll never share your email with anyone else.
    A name is required to submit this form. It replaces the helper text.
    This will help us learn more about you.0/300
    Copy
    Custom Helper Text
    Copy
    Copy
    some-form.tsx
    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>
    )
    }
    import { FieldParts } from '@cerberus/react'
    import { Box } from 'styled-system/jsx'
    search-input.tsx
    import { Field, Input } from '@cerberus/react'
    import { Search } from
    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>
    )
    }
    '
    @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>
    )
    }
    Input

    On this page

    • Usage
    • With Icons
    • Customizing
    • API
    • Props
    • Edit this page on Github