Tailwind CSS

(uses HTML5 implementation)

Github repo: https://github.com/concrete-form/html5

Install

yarn add @concrete-form/html5
# or with NPM :
npm install @concrete-form/html5

Not sure which version to install ? check this

Dependencies

tailwindcss

Get started with Tailwind CSS.

@tailwindcss/forms (recommended)

Provides a basic reset for form styles that makes form elements easy to override with utilities.

github.com/tailwindlabs/tailwindcss-forms

setup

Styles

Forms global CSS

• Adds red color for errors (feel free to change it)
• Handles the position of the label (left, right, top or bottom)
• Handles orientation of the group of items (horizontally or vertically)

@tailwind base;
@tailwind components;
@tailwind utilities;

/* errors */

.concreteform-control [aria-invalid=true] {
  @apply border-red-600 text-red-600 focus:border-red-600 focus:ring-red-600;
  @apply dark:border-red-500 dark:text-red-500 dark:focus:border-red-500 dark:focus:ring-red-500;
}
.concreteform-control-errors {
  @apply list-none m-0 p-1 text-sm text-red-600;
  @apply dark:text-red-500;
}

/* positionning */

.concreteform-left {
  @apply flex flex-row-reverse justify-start;
}
.concreteform-right {
  @apply flex flex-row;
}
.concreteform-top {
  @apply flex flex-col-reverse;
}
.concreteform-bottom {
  @apply flex flex-col;
}

/* items group (radio / checkbox items) */

.concreteform-items-group {
  @apply flex;
}
.concreteform-items-group-horizontal {
  @apply flex-row;
}
.concreteform-items-group-vertical {
  @apply flex-col;
}

Apply Tailwind CSS classes to the controls

tip

We recommend re-exporting form components.
This is especially useful for Tailwind implementation to set default CSS classes!

Example

Flowbite is a collection of components.
Flowbite demo - codesandbox

Template to customize CSS classes

src/components/Form.tsx

import CfLabelledControl, { LabelledControlProps } from '@concrete-form/html5/LabelledControl'
import CfInput, { InputProps } from '@concrete-form/html5/Input'
import CfDateTime, { DateTimeProps } from '@concrete-form/html5/DateTime'
import CfFileInput, { FileInputProps } from '@concrete-form/html5/FileInput'
import CfSelect, { SelectProps } from '@concrete-form/html5/Select'
import CfSingleCheckbox, { SingleCheckboxProps } from '@concrete-form/html5/SingleCheckbox'
import CfSlider, { SliderProps } from '@concrete-form/html5/Slider'
import CfTextarea, { TextareaProps } from '@concrete-form/html5/Textarea'
import CfToggleSwitch, { ToggleSwitchProps } from '@concrete-form/html5/ToggleSwitch'
import CfCheckboxGroup, { CheckboxGroupProps } from '@concrete-form/html5/CheckboxGroup'
import CfRadioGroup, { RadioGroupProps } from '@concrete-form/html5/RadioGroup'
import CfSubmitButton, { SubmitButtonProps } from '@concrete-form/html5/SubmitButton'

export { default } from '@concrete-form/react-hook-form/Form'

export const LabelledControl: React.FC<LabelledControlProps> = ({ label, ...props }) => (
  <CfLabelledControl
    label={<div className="...">{ label }</div>}
    labelContainerProps={{ className: '...' }}
    controlContainerProps={{ className: '...' }}
    {...props}
  />
)

export const Input: React.FC<InputProps> = props => (
  <CfInput
    className="..."
    {...props}
  />
)

export const DateTime: React.FC<DateTimeProps> = props => (
  <CfDateTime
    className="..."
    {...props}
  />
)

export const FileInput: React.FC<FileInputProps> = props => (
  <CfFileInput
    className="..."
    {...props}
  />
)

export const Select: React.FC<SelectProps> = props => (
  <CfSelect
    className="..."
    {...props}
  />
)

export const SingleCheckbox: React.FC<SingleCheckboxProps> = ({ label, ...props }) => (
  <CfSingleCheckbox
    label={<div className="...">{ label }</div>}
    className="..."
    {...props}
  />
)

export const Slider: React.FC<SliderProps> = props => (
  <CfSlider
    className="..."
    {...props}
  />
)

export const Textarea: React.FC<TextareaProps> = props => (
  <CfTextarea
    className="..."
    {...props}
  />
)

export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ label, ...props }) => (
  <CfToggleSwitch
    label={<div className="...">{ label }</div>}
    className="..."
    toggleSwitchContainerProps={{ className: '...' }}
    toggleSwitchSliderProps={{ className: '...' }}
    {...props}
  />
)

export const CheckboxGroup: React.FC<CheckboxGroupProps> = props => {
  return (
    <CfCheckboxGroup
      className="..."
      itemLabelContainerProps={({ disabled = false }) => ({
        className: disabled
          ? '...'
          : '...',
      })}
      {...props}
    />
  )
}

export const RadioGroup: React.FC<RadioGroupProps> = props => {
  return (
    <CfRadioGroup
      className="..."
      itemLabelContainerProps={({ disabled = false }) => ({
        className: disabled
          ? '...'
          : '...',
      })}
      {...props}
    />
  )
}

export const SubmitButton: React.FC<SubmitButtonProps> = props => (
  <CfSubmitButton
    className="..."
    {...props}
  />
)