{"id":16295121,"url":"https://github.com/wadackel/react-drip-form-bootstrap","last_synced_at":"2026-05-06T22:02:13.155Z","repository":{"id":143905121,"uuid":"97251273","full_name":"wadackel/react-drip-form-bootstrap","owner":"wadackel","description":"React Bootstrap component set for react-drip-form.","archived":false,"fork":false,"pushed_at":"2017-07-18T15:41:54.000Z","size":1453,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-31T21:55:52.985Z","etag":null,"topics":["bootstrap","form","form-validation","react","react-component","reactjs","validation"],"latest_commit_sha":null,"homepage":"https://tsuyoshiwada.github.io/react-drip-form-bootstrap/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wadackel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-14T16:04:23.000Z","updated_at":"2019-07-16T02:16:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"253b3f95-1c14-4f39-8611-43fcc7d9400f","html_url":"https://github.com/wadackel/react-drip-form-bootstrap","commit_stats":null,"previous_names":["tsuyoshiwada/react-drip-form-bootstrap"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wadackel/react-drip-form-bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Freact-drip-form-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Freact-drip-form-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Freact-drip-form-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Freact-drip-form-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wadackel","download_url":"https://codeload.github.com/wadackel/react-drip-form-bootstrap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Freact-drip-form-bootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32713820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T19:35:05.142Z","status":"ssl_error","status_checked_at":"2026-05-06T19:35:03.996Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","form","form-validation","react","react-component","reactjs","validation"],"created_at":"2024-10-10T20:17:41.247Z","updated_at":"2026-05-06T22:02:13.121Z","avatar_url":"https://github.com/wadackel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-drip-form-bootstrap\n\n[rdf]:https://github.com/tsuyoshiwada/react-drip-form\n[rbs]:https://github.com/react-bootstrap/react-bootstrap\n[demo]:https://tsuyoshiwada.github.io/react-drip-form-bootstrap/\n[validationstate]:#getvalidationstate\n\n[![Build Status](http://img.shields.io/travis/tsuyoshiwada/react-drip-form-bootstrap.svg?style=flat-square)](https://travis-ci.org/tsuyoshiwada/react-drip-form-bootstrap)\n[![Codecov](https://img.shields.io/codecov/c/github/tsuyoshiwada/react-drip-form-bootstrap.svg?style=flat-square)](https://codecov.io/gh/tsuyoshiwada/react-drip-form-bootstrap)\n[![npm version](https://img.shields.io/npm/v/react-drip-form-bootstrap.svg?style=flat-square)](http://badge.fury.io/js/react-drip-form-bootstrap)\n\n\u003e [React Bootstrap][rbs] component set for [react-drip-form][rdf].\n\nhttps://tsuyoshiwada.github.io/react-drip-form-bootstrap/\n\n\n\n\n## Table Of Contents\n\n* [DEMO](#demo)\n* [Getting Started](#getting-started)\n  * [Installation](#installation)\n  * [Usage](#usage)\n* [API](#api)\n  * [getValidationState](#getvalidationstate)\n  * [Checkbox](#checkbox)\n  * [FieldGroup](#fieldgroup)\n  * [HorizontalInput](#horizontalinput)\n  * [HorizontalSelect](#horizontalselect)\n  * [HorizontalTextarea](#horizontaltextarea)\n  * [InlineInput](#inlineinput)\n  * [InlineSelect](#inlineselect)\n  * [Input](#input)\n  * [Radio](#radio)\n  * [Select](#select)\n  * [Textarea](#textarea)\n* [Related projects](#related-projects)\n* [Contribute](#contribute)\n* [License](#license)\n\n\n\n\n## DEMO\n\nSee [Live Demo][demo].\n\n\n\n\n## Getting Started\n\n### Installation\n\n[react-drip-form][rdf] and [react-bootstrap][rbs] must also be installed.\n\n```bash\n$ npm install --save react-bootstrap\n$ npm install --save react-drip-form\n$ npm install --save react-drip-form-bootstrap\n```\n\n\n### Usage\n\n```javascript\nimport React from 'react';\nimport { dripForm } from 'react-drip-form';\nimport { Form, FormGroup, Button } from 'react-bootstrap';\nimport {\n  Checkbox,\n  FieldGroup,\n  Input,\n  Radio,\n  Select,\n  Textarea,\n} from 'react-drip-form-bootstrap';\n\nconst SampleForm = ({ handlers }) =\u003e (\n  \u003cForm onSubmit={handlers.onSubmit}\u003e\n    \u003cInput\n      type=\"text\"\n      name=\"text\"\n      label=\"Text Field\"\n      labelText=\"Text Field\"\n      placeholder=\"placeholder...\"\n      addonBefore={\u003cInputGroup.Addon\u003eBefore\u003c/InputGroup.Addon\u003e}\n    /\u003e\n\n    \u003cTextarea\n      name=\"textarea\"\n      label=\"Textarea Field\"\n      labelText=\"Textarea Field\"\n      placeholder=\"placeholder...\"\n      addonAfter={\u003cInputGroup.Addon\u003eAfter\u003c/InputGroup.Addon\u003e}\n    /\u003e\n\n    \u003cSelect\n      name=\"select\"\n      label=\"Select Field\"\n      labelText=\"Select Field\"\n    \u003e\n      \u003coption value=\"\"\u003eSelect option\u003c/option\u003e\n      \u003coption value=\"option1\"\u003eOption 1\u003c/option\u003e\n      \u003coption value=\"option2\"\u003eOption 2\u003c/option\u003e\n      \u003coption value=\"option3\"\u003eOption 3\u003c/option\u003e\n    \u003c/Select\u003e\n\n    \u003cFormGroup\u003e\n      \u003cControlLabel\u003eCheckbox Group\u003c/ControlLabel\u003e\n      \u003cFieldGroup\n        multiple\n        name=\"checkboxGroup\"\n        label=\"Checkbox Group\"\n      \u003e\n        \u003cCheckbox value=\"checkbox1\"\u003eCheckbox 1\u003c/Checkbox\u003e\n        \u003cCheckbox value=\"checkbox2\"\u003eCheckbox 2\u003c/Checkbox\u003e\n        \u003cCheckbox value=\"checkbox3\"\u003eCheckbox 3\u003c/Checkbox\u003e\n      \u003c/FieldGroup\u003e\n    \u003c/FormGroup\u003e\n\n    \u003cFormGroup\u003e\n      \u003cControlLabel\u003eRadio Group\u003c/ControlLabel\u003e\n      \u003cFieldGroup\n        name=\"radioGroup\"\n        label=\"Radio Group\"\n      \u003e\n        \u003cRadio value=\"radio1\"\u003eRadio 1\u003c/Radio\u003e\n        \u003cRadio value=\"radio2\"\u003eRadio 2\u003c/Radio\u003e\n        \u003cRadio value=\"radio3\"\u003eRadio 3\u003c/Radio\u003e\n      \u003c/FieldGroup\u003e\n    \u003c/FormGroup\u003e\n\n    \u003cFormGroup\u003e\n      \u003cButton onClick={handlers.onSubmit}\u003eSubmit\u003c/Button\u003e\n    \u003c/FormGroup\u003e\n  \u003c/Form\u003e\n);\n```\n\nInline layout and horizontal layout are also supported. For details, please refer to [Live DEMO][demo].\n\n\n\n\n## API\n\nAll other than Props described below are the same as [React Bootstrap][rbs].\n\n\n### getValidationState\n\nIt is a function for determining the validation state. It takes a field Props as an argument and returns `'error'` or `null`.\n\nBy default the following code is used.\n\n```javascript\n({ meta }) =\u003e (meta.error \u0026\u0026 meta.touched \u0026\u0026 meta.dirty) ? 'error' : null\n```\n\n\n\n### Checkbox\n\nIt's a Checkbox Component.\n\n| Props                | Default                | Type       | Description                                |\n|:---------------------|:-----------------------|:-----------|:-------------------------------------------|\n| `getValidationState` | [see][validationstate] | `Function` | ref: [getValidationState][validationstate] |\n\n\n### FieldGroup\n\nIt's a FieldGroup Component.\n\n| Props                | Default                | Type            | Description                                            |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------|\n| `children`           | `undefined`            | `React$Element` | Specify child elements such as `Checkbox` and `Radio`. |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]             |\n\n\n### HorizontalInput\n\nIt's `\u003cInput /\u003e` Component of the horizontal layout.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelColProps`      | `{}`                   | `Object`        | Props passed to `\u003cCol componentClass={ControlLabel} /\u003e`.                                         |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `controlColProps`    | `{}`                   | `Object`        | Props passed to `Col`.                                                                           |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n### HorizontalSelect\n\nIt's `\u003cSelect /\u003e` Component of the horizontal layout.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelColProps`      | `{}`                   | `Object`        | Props passed to `\u003cCol componentClass={ControlLabel} /\u003e`.                                         |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `controlColProps`    | `{}`                   | `Object`        | Props passed to `Col`.                                                                           |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n### HorizontalTextarea\n\nIt's `\u003cTextarea /\u003e` Component of the horizontal layout.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelColProps`      | `{}`                   | `Object`        | Props passed to `\u003cCol componentClass={ControlLabel} /\u003e`.                                         |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `controlColProps`    | `{}`                   | `Object`        | Props passed to `Col`.                                                                           |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n### InlineInput\n\nIt's `\u003cInput /\u003e` Component of the inline layout.\n\n\u003e Note: For inline layout, no error message is displayed.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelProps`         | `{}`                   | `Object`        | Props passed to `ControlLabel`.                                                                  |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n### InlineSelect\n\nIt's `\u003cSelect /\u003e` Component of the inline layout.\n\n\u003e Note: For inline layout, no error message is displayed.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelProps`         | `{}`                   | `Object`        | Props passed to `ControlLabel`.                                                                  |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n### Input\n\nIt's Input Component.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelProps`         | `{}`                   | `Object`        | Props passed to `ControlLabel`.                                                                  |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n### Radio\n\nIt's a Radio Component.\n\n| Props                | Default                | Type       | Description                                |\n|:---------------------|:-----------------------|:-----------|:-------------------------------------------|\n| `getValidationState` | [see][validationstate] | `Function` | ref: [getValidationState][validationstate] |\n\n\n### Select\n\nIt's Select Component.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelProps`         | `{}`                   | `Object`        | Props passed to `ControlLabel`.                                                                  |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n### Textarea\n\nIt's Textarea Component.\n\n| Props                | Default                | Type            | Description                                                                                      |\n|:---------------------|:-----------------------|:----------------|:-------------------------------------------------------------------------------------------------|\n| `id`                 | `undefined`            | `string`        | The ID that you specify for `FormGroup.controlId`, `ControlLabel.htmlFor`, and `FormControl.id`. |\n| `bsSize`             | `undefined`            | `string`        | The size of the `FormGroup`, `ControlLabel` and `FormControl`.                                   |\n| `groupProps`         | `{}`                   | `Object`        | Props passed to `FormGroup`.                                                                     |\n| `labelProps`         | `{}`                   | `Object`        | Props passed to `ControlLabel`.                                                                  |\n| `labelText`          | `undefined`            | `React$Element` | The label of the field. `ControlLabel` is used for label rendering.                              |\n| `inputGroupProps`    | `{}`                   | `Object`        | Props passed to `InputGroup`. Valid only when `addonBefore` or` addonAfter` is specified.        |\n| `addonBefore`        | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `addonAfter`         | `undefined`            | `React$Element` | Specify `InputGroup.Addon` component.                                                            |\n| `getValidationState` | [see][validationstate] | `Function`      | ref: [getValidationState][validationstate]                                                       |\n\n\n\n\n## Related projects\n\n* [tsuyoshiwada/react-drip-form][rdf]\n\n\n\n\n## Contribute\n\n1. Fork it!\n1. Create your feature branch: git checkout -b my-new-feature\n1. Commit your changes: git commit -am 'Add some feature'\n1. Push to the branch: git push origin my-new-feature\n1. Submit a pull request :D\n\nBugs, feature requests and comments are more than welcome in the [issues](https://github.com/tsuyoshiwada/react-drip-form-bootstrap/issues).\n\n\n\n\n## License\n\n[MIT © tsuyoshiwada](./LICENSE)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadackel%2Freact-drip-form-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwadackel%2Freact-drip-form-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadackel%2Freact-drip-form-bootstrap/lists"}