@comparaonline/ui-form-fields

@comparaonline/ui-form-fields

Installation

yarn add @comparaonline/ui-form-fields

Usage

TextField

import { TextField } from '@comparaonline/ui-form-fields';

<TextField
  label="Text Field Demo"
  name="text-field-demo"
  placeholder="Demo placeholder"
/>

The only required prop is name, all the other can be any of the MUI's Text Field props.

RadioGroupField

import { RadioGroupField } from '@comparaonline/ui-form-fields';

<RadioGroupField
  name="radioGroupDemo"
  validate={validateWith(required)}
  errorMessage="Error"
  helperText="Radio button family"
  renderLabel={<span>Demo with emoji 🇨🇱</span>}
  options={[
    { label: 'Masculino', value: '99' },
    { label: 'Feminino', value: '100' }
  ]}
/>

CheckboxField

import { CheckboxField } from '@comparaonline/ui-form-fields';

Boolean List

<CheckboxField
  name="feature"
  validate={validateList}
  errorMessage="Error validating the Check List"
  helperText="Boolean approach"
  renderLabel={<span>Checkbox Field List ✅</span>}
  options={[
    { name: 'feature.a', label: 'A' },
    { name: 'feature.b', label: 'B' },
    { name: 'feature.c', label: 'C' },
    { name: 'feature.d', label: 'D' }
  ]}
/>

This will create a value like this

{
  "feature": {
    "a": true,
    "d": true
  }
}

Values Array

<CheckboxField
  name="feature"
  validate={validateList}
  errorMessage="Error validating the Check List"
  helperText="Boolean approach"
  renderLabel={<span>Checkbox Field List ✅</span>}
  options={[
    { name: 'feature', label: 'A', value: 'A' },
    { name: 'feature', label: 'B', value: 'B' },
    { name: 'feature', label: 'C', value: 'C' },
    { name: 'feature', label: 'D', value: 'D' }
  ]}
/>

This will create a value like this

{
  "feature": [
    "D",
    "B"
  ]
}