Themeable Forms

Features

🧩 @start-base/react-form-elements: A comprehensive library providing various form elements like inputs, checkboxes, radios, and more. This library offers highly customizable and accessible form components.

🎨 SCSS: SCSS is used to apply custom styles to form elements, including labels, inputs, errors, and more.

What's Included

< CustomAmountInput />

A customized input component for entering amounts, leveraging @start-base/react-form-elements/AmountInput. It includes custom styling for the input, label, and error messages.

< CustomCalendar />

A customized calendar component for date selection, using @start-base/react-form-elements/Calendar. Custom styles are applied to the label, error messages, and calendar display.

< CustomCheckbox />

A customized checkbox component, built using @start-base/react-form-elements/Checkbox. It includes custom styling for the checkbox option, label, and error messages.

< CustomCheckboxCards />

A customized component for checkbox cards, based on @start-base/react-form-elements/CheckboxCards. Custom styles are applied to the card layout, label, option label, and error messages.

< CustomCheckboxGroup />

A customized group of checkboxes using @start-base/react-form-elements/CheckboxGroup, with custom styles for options, labels, option labels, and error messages.

< CustomDatePicker />

A customized date picker component, utilizing @start-base/react-form-elements/DatePicker. Custom styles are applied to the input, label, error messages, and calendar.

< CustomDateRangePicker />

A customized date range picker component, built using @start-base/react-form-elements/DateRangePicker. Custom styles include input, label, error messages, and calendar elements.

< CustomForm />

A form component leveraging @start-base/react-form-elements/Form, providing a standardized structure for form elements with built-in validations and layout controls.

< CustomInput />

A customized text input component based on @start-base/react-form-elements/Input, featuring custom styles for the input field, label, and error messages.

< CustomMultipleDatePicker />

A customized multiple date picker component, using @start-base/react-form-elements/MultipleDatePicker. It supports the selection of multiple dates with custom styles for inputs, labels, error messages, and calendar display.

< CustomNumberInput />

A customized number input component, leveraging @start-base/react-form-elements/NumberInput, with custom styles for the input, label, and error messages.

< CustomOTPInput />

A customized input component for One-Time Password (OTP) entry, using @start-base/react-form-elements/OTPInput. It includes custom styles for input fields, labels, and error messages.

< CustomPasswordInput />

A customized password input component based on @start-base/react-form-elements/PasswordInput. It includes custom styles for the input field, label, and error messages.

< CustomPhoneInput />

A customized phone number input component, built with @start-base/react-form-elements/PhoneInput. It features custom styling for the input, label, and error messages.

< CustomRadio />

A customized radio button component, utilizing @start-base/react-form-elements/Radio. Custom styles are applied to the radio options, labels, and error messages.

< CustomRadioCards />

A customized radio card component, based on @start-base/react-form-elements/RadioCards. Custom styles are applied to cards, labels, option labels, and error messages.

< CustomRadioGroup />

A customized group of radio buttons, built with @start-base/react-form-elements/RadioGroup. It includes custom styling for options, labels, option labels, and error messages.

< CustomSelect />

A customized select dropdown component using @start-base/react-form-elements/Select. It includes custom styling for the dropdown menu, control, input, label, and error messages.

< CustomSlider />

A customized slider component, utilizing @start-base/react-form-elements/Slider. It features custom styles for the handle, rail, label, and error messages.

< CustomSwitch />

A customized switch toggle component, built with @start-base/react-form-elements/Switch. Custom styles are applied to the switch input, label, and error messages.

< CustomTextArea />

A customized text area component based on @start-base/react-form-elements/TextArea. It includes custom styles for the text area input, label, and error messages.

< UnstyledSelect />

A basic select dropdown component using @start-base/react-form-elements/Select without custom styles, allowing for a more straightforward integration.

Styling Components

The components included in the Themeable Forms are highly customizable, thanks to SCSS. You can find the SCSS classes applied to various form elements in FormElements.module.scss.