@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 prop-types styled-components @zendeskgarden/react-theming

Usage

/**
 * Include forms styling at the root of your application
 */
import '@zendeskgarden/react-forms/dist/styles.css';

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

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