1.15.0 • Published 4 months ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

npm.io

Documentation

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

Installation

To install, you can use npm or yarn:

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

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

import '@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:

--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 {
}
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;

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

.input {
  &:focus {
  }
}

.inputFocused {
}

Demos

For live demos, please visit our Storybook page.

Contributing

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

1.14.0

5 months ago

1.15.0

4 months ago

1.13.2

8 months ago

1.13.1

8 months ago

1.13.0

9 months ago

1.12.0

9 months ago

1.11.0

10 months ago

1.11.1

10 months ago

1.9.13

12 months ago

1.9.12

1 year ago

1.9.11

1 year ago

1.9.10

1 year ago

1.9.9

1 year ago

1.9.8

1 year ago

1.9.7

1 year ago

1.9.6

1 year ago

1.9.5

1 year ago

1.9.4

1 year ago

1.9.3

1 year ago

1.9.2

1 year ago

1.9.1

1 year ago

1.9.0

1 year ago

1.10.1

11 months ago

1.10.0

11 months ago

1.8.7

1 year ago

1.8.6

1 year ago

1.8.5

1 year ago

1.8.2

1 year ago

1.8.4

1 year ago

1.8.3

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.7.18

2 years ago

1.7.17

2 years ago

1.7.16

2 years ago

1.7.15

2 years ago

1.7.14

2 years ago

1.7.13

2 years ago

1.7.12

2 years ago

1.7.11

2 years ago

1.7.10

2 years ago

1.7.9

2 years ago

1.7.8

2 years ago

1.7.7

2 years ago

1.7.6

2 years ago

1.7.5

2 years ago

1.7.4

2 years ago

1.7.3

2 years ago

1.7.2

2 years ago

1.7.1

2 years ago

1.7.0

2 years ago

1.6.13

2 years ago

1.6.12

2 years ago

1.6.11

2 years ago

1.6.10

2 years ago

1.6.9

2 years ago

1.6.8

2 years ago

1.6.7

2 years ago

1.6.6

2 years ago

1.6.5

2 years ago

1.6.4

2 years ago

1.6.3

2 years ago

1.6.2

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.5.0

2 years ago

1.4.0

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago