Need private packages and team management tools?Check out npm Teams »

@zendeskgarden/container-field

1.3.2 • Public • Published

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

Install

npm i @zendeskgarden/container-field

DownloadsWeekly Downloads

6,917

Version

1.3.2

License

Apache-2.0

Unpacked Size

26.8 kB

Total Files

9

Last publish

Collaborators

  • avatar