sbx-react-form v1.7.1

SBX React Form

Live demo

sbx i --save sbx-react-form

Styles

import 'sbx-react-form/libs/assets/styles/styles.scss';

import Form from 'sbx-react-form';

<Form
    onSubmit={data => {

    }}
>
    <div className="form-row">
        <div className="col-md-6">
            <h4>Native fields</h4>
            <hr/>
            <div className="mb-3">
                <Fields.input
                    name="name"
                    label="Input"
                    placeholder="Your name"
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
            <div className="mb-3">
                <Fields.input
                    name="phone"
                    label="Input with mask"
                    mask={['+', '7', ' ', '(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, '-', /\d/, /\d/]}
                    placeholder="+7 (953) 491-29-43"
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
            <div className="mb-3">
                <Fields.select
                    name="country"
                    label="Select"
                >
                    <option value="russia">Russia Federation</option>
                    <option value="usa">United States</option>
                </Fields.select>
            </div>
            <div className="mb-3">
                <Fields.select
                    name="language"
                    label="Multiple Select"
                    multiple
                    size={3}
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                >
                    <option value="ru">RU</option>
                    <option value="en">EN</option>
                    <option value="ua">UA</option>
                </Fields.select>
            </div>
            <div className="mb-3">
                <Fields.file
                    multiple
                    name="document"
                    label="File"
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
            <div className="mb-3">
                <Fields.textarea
                    name="note"
                    label="Textarea"
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
            <div className="mb-3">
                <Fields.radio
                    name="sex"
                    value="male"
                    label="Male"
                    defaultChecked={true}
                />
                <Fields.radio
                    name="sex"
                    value="female"
                    label="Female"
                />
            </div>
            <div className="mb-3">
                <Fields.checkbox
                    name="agree"
                    label="I agree with the rules"
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
        </div>
        <div className="col-md-6">
            <h4>Custom fields</h4>
            <hr/>
            <div className="mb-3">
                <Fields.customSelect
                    name="customSelect"
                    label="Custom Select"
                    options={[
                        {value: 1, text: 'Value 1'},
                        {value: 2, text: 'Value 2'},
                        {value: 3, text: 'Value 3'},
                    ]}
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
            <div className="mb-3">
                <Fields.customSelect
                    multiple
                    name="customMultiSelect"
                    label="Custom Multiple Select"
                    options={[
                        {value: 1, text: 'Value 1'},
                        {value: 2, text: 'Value 2'},
                        {value: 3, text: 'Value 3'},
                    ]}
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
            <div className="mb-3">
                <Fields.date
                    time
                    name="date"
                    format="DD.MM.YYYY HH:mm"
                    label="Date"
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
            <div className="mb-3">
                <Fields.phone
                    label="Phone"
                    name="phone"
                    placeholder="+7 978 234 33 22"
                    defaultCountry="RU"
                    onCountryChange={value => console.log(value)}
                    validate={{
                        isRequired: {
                            error: "Field is required"
                        }
                    }}
                />
            </div>
        </div>
        <div className="col-md-12">
            <hr/>
            <button className="btn btn-primary" type="submit">Submit form</button>
        </div>
    </div>
</Form>