@zendeskgarden/react-forms

What is @zendeskgarden/react-forms?

@zendeskgarden/react-forms is a package that provides a set of accessible and customizable form components for React applications. It is part of the Zendesk Garden design system, which aims to offer a consistent and visually appealing user interface.

What are @zendeskgarden/react-forms's main functionalities?

Text Input

The TextInput component allows users to input text data. It is customizable and can be styled according to the application's needs.

<TextInput placeholder='Enter text' />

Checkbox

The Checkbox component provides a way for users to make binary choices. It includes a label for accessibility and can be styled to fit the application's design.

<Checkbox label='Accept terms and conditions' />

Radio Button

The RadioGroup and Radio components allow users to select one option from a set. They are grouped together to ensure only one option can be selected at a time.

<RadioGroup name='options'><Radio label='Option 1' /><Radio label='Option 2' /></RadioGroup>

Select Dropdown

The Select component provides a dropdown menu for users to choose from multiple options. It is useful for forms where space is limited.

<Select><Option value='1'>Option 1</Option><Option value='2'>Option 2</Option></Select>

Other packages similar to @zendeskgarden/react-forms

formik

Formik is a popular library for building forms in React. It provides a comprehensive set of tools for managing form state, validation, and submission. Compared to @zendeskgarden/react-forms, Formik offers more advanced form management capabilities but does not include pre-styled components.

react-hook-form

React Hook Form is a performant and flexible library for handling form state and validation in React. It is known for its minimal re-renders and ease of integration with existing components. Unlike @zendeskgarden/react-forms, it focuses on form logic rather than UI components.

react-final-form

React Final Form is a library for managing form state in React applications. It is lightweight and provides a simple API for handling form data and validation. While it does not offer pre-styled components like @zendeskgarden/react-forms, it excels in form state management.

README

@zendeskgarden/react-forms

This package includes components relating to native form fields in the Garden Design System.

Installation

npm install @zendeskgarden/react-forms

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Field, Input } from '@zendeskgarden/react-forms';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <form>
    <Field>
      <Field.Label>Example Text Input</Field.Label>
      <Field.Hint>Hint text</Field.Hint>
      <Input placeholder="Accepts all native input props" />
      <Field.Message>Default message styling</Field.Message>
    </Field>
  </form>
</ThemeProvider>;

Changelog

v9.0.0-next.25 (2024-09-05)

:boom: Breaking Change

• accordions, avatars, breadcrumbs, buttons, chrome, colorpickers, datepickers, draggable, dropdowns.legacy, dropdowns, forms, grid, loaders, modals, notifications, pagination, tables, tabs, tags, theming, tooltips, typography
  • #1905 refactor: remove theme defaultProp (@ze-flo)

:bug: Bug Fix

• tabs
  • #1911 fix(tabs): allow focus ring to resize based on content (@ze-flo)

:seedling: Internal

• #1909 chore(deps-dev): bump webpack from 5.93.0 to 5.94.0 (@dependabot[bot])