@zendeskgarden/container-field

This package includes containers relating to field in the Garden Design System.

Installation

npm install @zendeskgarden/container-field

Usage

Check out storybook for live examples.

The useField hook will supply the prop getters to handle aria-labelledby along with for/id mapping and aria-describedby mapping when a hint and/or status message is applied.

useField

import { useField } from '@zendeskgarden/container-field';

const Field = () => {
  const { getLabelProps, getInputProps, getHintProps, getMessageProps } = useField();

  return (
    <>
      <label {...getLabelProps()}>Accessible Native Input</label>
      <p {...getHintProps()}>Optional Hint</p>
      <input {...getInputProps()} />
      <p {...getMessageProps()}>Optional Status Message</p>
    </>
  );
};

FieldContainer

FieldContainer is a render-prop wrapper for the useField hook.

import { FieldContainer } from '@zendeskgarden/container-field';

<FieldContainer>
  {({ getLabelProps, getInputProps, getHintProps, getMessageProps }) => (
    <>
      <label {...getLabelProps()}>Accessible Native Input</label>
      <p {...getHintProps()}>Optional Hint</p>
      <input {...getInputProps()} />
      <p {...getMessageProps()}>Optional Status Message</p>
    </>
  )}
</FieldContainer>;