Field Message

1
import { Field, FieldMessage, Label } from '@cerberus-design/react'
2

3
function FieldMessageBasicPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="first_name">First Name</Label>
7
      <Input aria-describedby="help:first_name" id="first_name" type="text" />
8
      <FieldMessage id="help:first_name">
9
        This will only be used in your account information.
10
      </FieldMessage>
11
    </Field>
12
  )
13
}

1
import { Field, FieldMessage, Label } from '@cerberus-design/react'
2

3
function FieldMessageInvalidPreview() {
4
  return (
5
    <Field invalid>
6
      <Label htmlFor="first_name">First Name</Label>
7
      <Input
8
        aria-describedby="help:first_name"
9
        id="first_name"
10
        type="text"
11
        placeholder="Your first name"
12
      />
13
      <FieldMessage id="help:first_name">
14
        A first name is required to create an account.
15
      </FieldMessage>
16
    </Field>
17
  )
18
}

1
import { Field, FieldMessage, Label } from '@cerberus-design/react'
2

3
function FieldMessageCustomPreview() {
4
  return (
5
    <Field required>
6
      <Label htmlFor="global_search">Killa Bees</Label>
7
      <Input aria-describedby="help:search" id="global_search" type="text" />
8
      <FieldMessage
9
        className={css({
10
          bgColor: 'black',
11
          color: 'yellow',
12
          p: '2',
13
        })}
14
        id="help:search"
15
      >
16
        Wu-Tang Clan ain&apos;t nothing to mess with!
17
      </FieldMessage>
18
    </Field>
19
  )
20
}