Field

import { Field, FieldDescription, FieldLabel, FieldMessage } from '@elemental-ui-alpha/field';

Field

The Field component is lower level building block for generating custom components.

Using a render prop, the field component connects the label, description, and message to the input element.

<Field
  label="Field label"
  description="We will never share your information with third parties"
  message="This field is required"
>
  {({ inputProps }) => <TextInput {...inputProps} />}
</Field>

Elements

If the layout of the Field component doesn't work for you, or for any other reason, you can compose the elements below in a way that suites. Please be mindful to maintain accessibility.

FieldDescription

A styled div element, intended to describe the field's intention.

<FieldDescription>
  Provide additional information, where the label will not suffice.
</FieldDescription>

FieldLabel

A styled label element

<FieldLabel>Field label</FieldLabel>

FieldMessage

A styled div element, intended to provide users with a "tonal" message within the context of a field.

<>
  <FieldMessage>A neutral message</FieldMessage>
  <FieldMessage tone="positive">A positive message</FieldMessage>
  <FieldMessage tone="critical">A critical message</FieldMessage>
</>

Composition

You must maintain accessibility when composing the elements yourself to create a custom component.

let [value, setValue] = useState('');
let [touched, setTouched] = useState(false);

let inputId = 'composed-input';
let messageId = 'composed-message';
let descriptionId = 'composed-description';
let isInvalid = !value && touched;

return (
  <Columns
    columns={8}
    gap={['small', null, null, null, 'xxlarge']}
    collapse="xlarge"
  >
    <Column span={3}>
      <FieldLabel htmlFor={inputId}>Email</FieldLabel>
      <FieldDescription id={descriptionId}>
        Use your company email
      </FieldDescription>
    </Column>
    <Column span={5}>
      <TextInput
        aria-describedby={isInvalid ? messageId : descriptionId}
        id={inputId}
        name="email"
        onBlur={() => setTouched(true)}
        onChange={e => setValue(e.target.value)}
        type="email"
        value={value}
      />
      {isInvalid && (
        <FieldMessage id={messageId} tone="critical">
          The email field is required
        </FieldMessage>
      )}
    </Column>
  </Columns>
);