@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.26 (2024-09-12)

:bug: Bug Fix

• chrome
  • #1920 fix(chrome): prevent focus on closed Sheet (@jzempel)
• dropdowns
  • #1919 fix(dropdowns): forwards menu button ref correctly (@geotrev)
• modals
  • #1917 fix(tooltips): ensure correct padding for TooltipDialog's inner elements if Close btn exists (@ze-flo)
• dropdowns, theming
  • #1918 fix(dropdowns): prevents menus focus focusing items early during animation (@geotrev)
• typography
  • #1916 fix(typography): set CodeBlock background to background.recessed (@jzempel)
  • #1915 fix(typography): revert react-prism-renderer to v1 (@jzempel)

:seedling: Internal

• #1914 docs: add removal of theme default prop ADR (@ze-flo)