@start-base/react-form-elements v1.8.6

@start-base/react-form-elements

Demos

For live demos of these components in action, please visit our CodeSandbox and Storybook demo pages.

Introduction

This npm package provides a set of form-related components for React. You can use these components to build forms with ease.

• CSS variables for theming are available for all components.
• Classnames are available for all components.
• Built-in dark mode support.

Installation

To install, you can use npm or yarn:

    $ npm install --save @start-base/react-form-elements

or

    $ yarn add @start-base/react-form-elements

Make sure to add css file to your app root file

import '@start-base/react-form-elements/index.css';

Usage

Each form element can be use separately. You can import them like this:

import Input from '@start-base/react-form-elements/Input';

const Page = () => {
  const [value, setValue] = useState('');

  const onChange = (e) => {
    const { name, value, type } = e.target;
    setValue(value);
  };

  return <Input name="name" label="Input" value={value} onChange={onChange} />;
};

export default Page;

or you can import all components from @start-base/react-form-elements like this:

import React, { useState } from 'react';
import {
  Input,
  Form,
  Checkbox,
  DatePicker,
} from '@start-base/react-form-elements';

const Page = () => {
  const [inputs, setInputs] = useState({});
  const onChange = (e) => {
    const { name, value, type } = e.target;

    setInputs((prevState) => ({
      ...prevState,
      [name]: type === 'checkbox' ? !prevState[name] : value,
    }));
  };

  return (
    <Form>
      <Input
        label="Username"
        name="username"
        value={inputs.username}
        onChange={onChange}
      />
      <Checkbox
        checked={inputs.agree}
        label="I understand and accept the terms and conditions and privacy policy."
        name="agree"
        onChange={onChange}
      />
      <DatePicker
        label="Date"
        name="date"
        value={inputs.date}
        onChange={onChange}
      />
    </Form>
  );
};

export default Page;

Components

Form

Input

TextArea

Checkbox

Radio

Switch

RadioGroup

PasswordInput

AmountInput

NumberInput

Select

PhoneInput

Calendar

DatePicker

MultipleDatePicker

DateRangePicker

API

The following props are available for each component:

Common Props

Form

Input

TextArea

Checkbox

Radio

Switch

RadioGroup

PasswordInput

AmountInput

This component is a wrapper around react-currency-input-field component. All props from react-currency-input-field can be passed to this component.

NumberInput

Select

This component is a wrapper around react-select component. All props from react-select can be passed to this component.

PhoneInput

This component is a wrapper around react-international-phone component. All props from react-international-phone can be passed to this component.

Calendar

This component is a wrapper around react-day-picker component. All props from react-day-picker can be passed to this component.

DatePicker

This component combined with Calendar component and Input component. All props from Calendar component and Input can be passed to this component.

MultipleDatePicker

This component combined with Calendar component and Select component. All props from Calendar component and Select can be passed to this component.

DateRangePicker

This component combined with Calendar component and Select component. All props from Calendar component and Select can be passed to this component.

OTPInput

This component is a wrapper around input-otp component. All props from input-otp can be passed to this component.

Styling

With CSS variables

You can use CSS variables to customize the look and feel of the components. Here's a list of all available variables:

--rfe-transparent: transparent;
--rfe-white: #fff;
--rfe-white-rgb: 255 255 255;
--rfe-black: #000;
--rfe-black-rgb: 0 0 0;
--rfe-color: #000;
--rfe-color-placeholder: #646464;
--rfe-color-error: #ff383e;
--rfe-border: #e6e6e6;
--rfe-background: #fafafa;
--rfe-background-selected: #f0f0f0;
--rfe-background-disabled: #e1e1e1;
--rfe-border-radius: 6px;
--rfe-font-size: 16px;
--rfe-placeholder-font-size: 14px;
--rfe-focused-font-size: 12px;
--rfe-error-font-size: 12px;
--rfe-input-height: 56px;
--rfe-spacing: 16px;
--rfe-label-spacing: 10px;
--rfe-focus: 0 0 10px #dcdcdc;
--rfe-font-family: 'Arial', sans-serif;

With classnames

You can use classnames to customize the look and feel of the components. Here's an example of how to use classnames:

.input {
  &:focus {
  }
}

.label {
}

.errorLabel {
}

import { forwardRef } from 'react';

import Input from '@start-base/react-form-elements/Input';

import styles from './CustomInput.module.scss';

const CustomInput = forwardRef((props, ref) => (
  <Input
    ref={ref}
    {...props}
    inputClassName={styles.input}
    labelClassName={styles.label}
    errorClassName={styles.errorLabel}
  />
));

export default CustomInput;

Examples

For more examples, please visit our CodeSandbox and Storybook demo pages.

react-hook-form

Here's an example of using the form elements with react-hook-form:

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import {
  Input,
  Form,
  Checkbox,
  DatePicker,
} from '@start-base/react-form-elements';

const Page = () => {
  const [inputs, setInputs] = useState({});
  const { control, register, handleSubmit, watch } = useForm();
  const onSubmit = (data) => setInputs(data);

  return (
    <Form>
      <Input
        label="Username"
        value={watch('username')}
        {...register('username')}
      />
      <Checkbox
        label="I understand and accept the terms and conditions and privacy policy."
        checked={watch('policy')}
        {...register('policy')}
      />
      <Controller
        name="date"
        control={control}
        render={({ field }) => (
          <DatePicker label="Date" value={watch('date')} {...field} />
        )}
      />
      <button onClick={handleSubmit(onSubmit)}>Submit</button>
    </Form>
  );
};

export default Page;

react-hook-form with yup

Here's an example of using the form elements with react-hook-form and yup:

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import {
  Input,
  Form,
  Checkbox,
  DatePicker,
} from '@start-base/react-form-elements';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const validationSchema = yup.object({
  username: yup.string().required('Required').label('Username'),
  date: yup.date().required('Required').label('Date'),
  policy: yup.boolean().required('Required').label('Policy'),
});

const Page = () => {
  const [inputs, setInputs] = useState({});
  const {
    formState: { errors },
    control,
    register,
    handleSubmit,
    watch,
  } = useForm({
    resolver: yupResolver(validationSchema),
  });
  const onSubmit = (data) => setInputs(data);

  return (
    <Form>
      <Input
        label="Username"
        value={watch('username')}
        {...register('username')}
        error={errors.username}
      />
      <Checkbox
        label="I understand and accept the terms and conditions and privacy policy."
        checked={watch('policy')}
        {...register('policy')}
        error={errors.policy}
      />
      <Controller
        name="date"
        control={control}
        render={({ field }) => (
          <DatePicker
            label="Date"
            value={watch('date')}
            error={errors.date}
            {...field}
          />
        )}
      />
      <button onClick={handleSubmit(onSubmit)}>Submit</button>
    </Form>
  );
};

export default Page;

Demos

For live demos of these components in action, please visit our CodeSandbox and Storybook demo pages.