Package Exports

@zendeskgarden/container-field
@zendeskgarden/container-field/dist/index.cjs.js
@zendeskgarden/container-field/dist/index.esm.js

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

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