@start-base/react-form-elements

Unlock a robust collection of form-focused React components, thoughtfully crafted for maximum ease of use and flexibility. Built with Next.js compatibility, these components streamline the website development process, enhancing efficiency and empowering you to create custom, user-friendly forms effortlessly.

---

Documentation

For full documentation, please visit start-ui.startbase.dev.

Installation

To install, you can use npm or yarn:

1$ npm install @start-base/react-form-elements
2# or
3$ yarn add @start-base/react-form-elements

Make sure to import styles.css to your app root:

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

Features

• CSS variables for theming.
• Classnames for fine tuning.
• Built-in dark mode support.
• Variants for different styles.

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:

1--rfe-transparent: transparent;
2--rfe-white: #fff;
3--rfe-white-rgb: 255 255 255;
4--rfe-black: #000;
5--rfe-black-rgb: 0 0 0;
6--rfe-color: #000;
7--rfe-color-placeholder: #646464;
8--rfe-color-error: #ff383e;
9--rfe-border: #e6e6e6;
10--rfe-background: #fafafa;
11--rfe-background-selected: #f0f0f0;
12--rfe-background-disabled: #e1e1e1;
13--rfe-border-radius: 6px;
14--rfe-font-size: 16px;
15--rfe-placeholder-font-size: 14px;
16--rfe-focused-font-size: 12px;
17--rfe-error-font-size: 12px;
18--rfe-input-height: 56px;
19--rfe-spacing: 16px;
20--rfe-label-spacing: 10px;
21--rfe-focus: 0 0 10px #dcdcdc;
22--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:

1.input {
2  &:focus {
3  }
4}
5
6.label {
7}

1import { forwardRef } from 'react';
2
3import Input from '@start-base/react-form-elements/Input';
4
5import styles from './CustomInput.module.scss';
6
7const CustomInput = forwardRef((props, ref) => (
8  <Input
9    ref={ref}
10    {...props}
11    inputClassName={styles.input}
12    labelClassName={styles.label}
13    errorClassName={styles.errorLabel}
14  />
15));
16
17export default CustomInput;

Or for all form elements you can use single css file.

1.input {
2  &:focus {
3  }
4}
5
6.inputFocused {
7}

Demos

For live demos, please visit our Storybook page.

Contributing

Contributions are welcomed. Feel free to submit pull requests and improvements to the project!

yunusozcan

emreonursoy