# @zendeskgarden/container-field

> Containers relating to field in the Garden Design System

Latest version **3.0.22** (published 2025-12-15) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @zendeskgarden/container-field
pnpm add @zendeskgarden/container-field
yarn add @zendeskgarden/container-field
bun add @zendeskgarden/container-field
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.22 |
| Published | 2025-12-15 |
| First published | 2019-03-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 290 |
| Author | Zendesk Garden <garden@zendesk.com> |
| Maintainers | zendesk-garden |
| Keywords | a11y, accessible, container, garden, headless, react, zendesk |

## Links

- npm: https://www.npmjs.com/package/@zendeskgarden/container-field
- Repository: https://github.com/zendeskgarden/react-containers
- Homepage: https://garden.zendesk.com/
- Issues: https://github.com/zendeskgarden/react-containers/issues
- npm.io page: https://npm.io/package/@zendeskgarden/container-field

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.8.4
- [@zendeskgarden/container-utilities](https://npm.io/package/@zendeskgarden/container-utilities.md) ^2.0.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.22 (latest) — 2025-12-15
- 3.0.21 — 2025-12-02
- 3.0.20 — 2025-08-05
- 3.0.19 — 2024-09-25
- 3.0.18 — 2024-08-23
- 3.0.17 — 2024-08-12
- 3.0.16 — 2024-07-01
- 3.0.15 — 2024-01-26
- 3.0.14 — 2024-01-26
- 3.0.13 — 2024-01-23
- 3.0.12 — 2023-10-02
- 3.0.11 — 2023-09-28
- 3.0.10 — 2023-08-29
- 3.0.9 — 2023-08-24
- 3.0.8 — 2023-08-23
- … 36 more at https://npm.io/package/@zendeskgarden/container-field/versions

## README

# @zendeskgarden/container-field [![npm version][npm version badge]][npm version link]

[npm version badge]: https://flat.badgen.net/npm/v/@zendeskgarden/container-field
[npm version link]: https://www.npmjs.com/package/@zendeskgarden/container-field

This package includes containers relating to field in the
[Garden Design System](https://zendeskgarden.github.io/).

## Installation

```sh
npm install @zendeskgarden/container-field
```

## Usage

Check out [storybook](https://zendeskgarden.github.io/react-containers) 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

```jsx
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.

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

---
_Source: https://npm.io/package/@zendeskgarden/container-field · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._