@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

| Name | Type | Default | Description | | -------------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | name | string | | Name of the input | | label | string | null | Label of the input | | placeholder | string | null | Placeholder of the input | | disableShrink | boolean | false | Position the label outside of the input | | value | string or number | | Value of the input | | onChange | function | | Callback function that is fired when the value changes. | | inputClassName | string | null | Classname for input element | | labelClassName | string | null | Classname for label element | | errorClassName | string | null | Classname for error element | | disabled | boolean | false | Disable the input | | error | string or boolean or object | null | Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects. |

Form

| Name | Type | Default | Description | | -------- | ----------- | ------- | -------------------- | | children | ReactNode | | Children of the form |

Input

| Name | Type | Default | Description | | ---------------- | --------------------- | ------- | ----------------------------- | | prepend | string or element | null | Prepend text to the input | | append | string or element | null | Append text to the input | | appendClassName | string | null | Classname for append element | | prependClassName | string | null | Classname for prepend element |

TextArea

| Name | Type | Default | Description | | -------- | --------- | ------- | ------------------ | | autoGrow | boolean | false | Auto grow textarea |

Checkbox

| Name | Type | Default | Description | | ------- | --------- | ------- | ----------------------------- | | checked | boolean | false | Checked state of the checkbox |

Radio

| Name | Type | Default | Description | | ------- | --------- | ------- | -------------------------- | | checked | boolean | false | Checked state of the radio |

Switch

| Name | Type | Default | Description | | ------- | --------- | ------- | --------------------------- | | checked | boolean | false | Checked state of the switch |

RadioGroup

| Name | Type | Default | Description | | -------------------- | -------- | ------- | --------------------------- | | options | array | [] | Array of options to display | | optionLabelClassName | string | null | Classname for option label |

PasswordInput

| Name | Type | Default | Description | | ---------------- | --------------------- | ------- | ----------------------------- | | prepend | string or element | null | Prepend text to the input | | appendClassName | string | null | Classname for append element | | prependClassName | string | null | Classname for prepend element |

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.

| Name | Type | Default | Description | | ---------------- | --------------------- | ------- | ----------------------------- | | prepend | string or element | null | Prepend text to the input | | append | string or element | null | Append text to the input | | appendClassName | string | null | Classname for append element | | prependClassName | string | null | Classname for prepend element |

NumberInput

| Name | Type | Default | Description | | ---------------- | --------------------- | ------- | ----------------------------- | | prepend | string or element | null | Prepend text to the input | | appendClassName | string | null | Classname for append element | | prependClassName | string | null | Classname for prepend element |

Select

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

| Name | Type | Default | Description | | ---------- | -------- | ------- | --------------------------------------- | | options | array | [] | Array of options to display | | classNames | object | null | ClassNames object for select components | | components | object | null | Components object for select |

PhoneInput

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

| Name | Type | Default | Description | | -------------- | -------- | ------- | ----------------------------------------------------- | | defaultCountry | string | us | Default country code for phone starting code and flag |

Calendar

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

| Name | Type | Default | Description | | ----------------- | -------- | ------- | ------------------------------ | | calendarClassName | string | null | Classname for calendar element |

DatePicker

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

| Name | Type | Default | Description | | ----------------- | -------- | ------------ | ------------------------------ | | locale | object | null | date-fns locale object | | format | string | MM/dd/yyyy | Date format | | calendarClassName | string | null | Classname for calendar element |

MultipleDatePicker

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

| Name | Type | Default | Description | | ----------------- | -------- | ------------ | --------------------------------- | | value | array | [] | value array of MultipleDatePicker | | locale | object | null | date-fns locale object | | format | string | MM/dd/yyyy | Date format | | calendarClassName | string | null | Classname for calendar element |

DateRangePicker

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

| Name | Type | Default | Description | | ----------------- | --------- | ------------ | ------------------------------------------- | | value | object | "" | to - from object | | locale | object | null | date-fns locale object | | format | string | MM/dd/yyyy | Date format | | calendarClassName | string | null | Classname for calendar element | | numberOfMonths | integer | 2 | Calender count to show date selection popup | | separator | string | " / " | Separator for dates on showing input |

OTPInput

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

| Name | Type | Default | Description | | ----------- | ---------- | ---------- | --------------------------------------------------------------------------- | | value | string | | Value of the input | | length | object | | Length of the code. | | timer | integer | null | OTP code timer limit of seconds. | | onComplete | function | | Callback function that is fired when the all values entered. | | onResend | function | | Callback function that is fired when the time out and cliced resend button. | | format | array | null | Inputs Separation array. | | separator | string | "-" | Separator element between inputs | | resendLabel | string | "Resend" | Resend button text. |

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.