Input

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 { 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>
  )
}