@zendeskgarden/container-field
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.8 • 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

    5,339

    Version

    1.3.8

    License

    Apache-2.0

    Unpacked Size

    28.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden