Package Exports

@zendeskgarden/container-field

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zendeskgarden/container-field) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@zendeskgarden/container-field

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>;