@zendeskgarden/container-field

Containers relating to field in the Garden Design System

Usage no npm install needed!

<script type="module">
  import zendeskgardenContainerField from 'https://cdn.skypack.dev/@zendeskgarden/container-field';
</script>

README

@zendeskgarden/container-field npm version

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

Installation

npm install @zendeskgarden/container-field

Usage

For live examples check out our storybook.

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

useField

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

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

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

FieldContainer

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

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

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