Field Message

Field Messages describe the context of a form element

overviewguidelinesdeva11y
import { Field, FieldMessage } from '@cerberus-design/react'

Usage

first-name-input.tsx
import { Field, FieldMessage, Label } from '@cerberus-design/react'


function FieldMessageBasicPreview() {
  return (
    <Field required>
      <Label htmlFor="first_name">First Name</Label>
      <Input aria-describedby="help:first_name" id="first_name" type="text" />
      <FieldMessage id="help:first_name">
        This will only be used in your account information.
      </FieldMessage>
    </Field>
  )
}

Invalid

search-input.tsx
import { Field, FieldMessage, Label } from '@cerberus-design/react'


function FieldMessageInvalidPreview() {
  return (
    <Field invalid>
      <Label htmlFor="first_name">First Name</Label>
      <Input
        aria-describedby="help:first_name"
        id="first_name"
        type="text"
        placeholder="Your first name"
      />
      <FieldMessage id="help:first_name">
        A first name is required to create an account.
      </FieldMessage>
    </Field>
  )
}

Customizing

search-input.tsx
import { Field, FieldMessage, Label } from '@cerberus-design/react'


function FieldMessageCustomPreview() {
  return (
    <Field required>
      <Label htmlFor="global_search">Killa Bees</Label>
      <Input aria-describedby="help:search" id="global_search" type="text" />
      <FieldMessage
        className={css({
          bgColor: 'black',
          color: 'yellow',
          p: '2',
        })}
        id="help:search"
      >
        Wu-Tang Clan ain&apos;t nothing to mess with!
      </FieldMessage>
    </Field>
  )
}

API

export interface FieldProps {
  disabled?: boolean
  invalid?: boolean
  required?: boolean
  readOnly?: boolean
}


define function Field(props: PropsWithChildren<FieldProps>): ReactNode
export interface FieldMessageProps
  extends HTMLAttributes<HTMLParagraphElement> {
  id: string
}


define function FieldMessage(props: FieldMessageProps): ReactNode

Props

The FieldMessage component accepts the same props as the small element except the id prop is required.