{"id":27370026,"url":"https://github.com/pod-point/form-components","last_synced_at":"2025-04-13T08:47:45.310Z","repository":{"id":57043152,"uuid":"94350268","full_name":"Pod-Point/form-components","owner":"Pod-Point","description":"Commonly used form components to make it easier and more flexible to create forms in Blade views.","archived":false,"fork":false,"pushed_at":"2023-09-27T10:55:09.000Z","size":61,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T08:27:06.887Z","etag":null,"topics":["blade-views","forms","laravel","laravel-5-package","software-team"],"latest_commit_sha":null,"homepage":"","language":"PHP","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/Pod-Point.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-14T16:13:57.000Z","updated_at":"2023-07-05T08:09:59.000Z","dependencies_parsed_at":"2022-08-23T23:40:31.288Z","dependency_job_id":null,"html_url":"https://github.com/Pod-Point/form-components","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pod-Point%2Fform-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pod-Point%2Fform-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pod-Point%2Fform-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pod-Point%2Fform-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pod-Point","download_url":"https://codeload.github.com/Pod-Point/form-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688176,"owners_count":21145762,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["blade-views","forms","laravel","laravel-5-package","software-team"],"created_at":"2025-04-13T08:47:44.287Z","updated_at":"2025-04-13T08:47:45.304Z","avatar_url":"https://github.com/Pod-Point.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Form Components\n\nCommonly used form components to make it easier and more flexible to create forms in [Blade](https://laravel.com/docs/master/blade) views.\n\nIt is intended to be usable by anyone.\n\nFor ease of use by [Pod Point](https://pod-point.com) staff, when classes are not specified they default to those used in the [Pod Point UI toolkit](https://github.com/Pod-Point/pod-point-ui-toolkit).\n\n## Editing\n\nTo edit this project, clone the repository:\n\n```bash\ngit clone git@github.com:Pod-Point/form-components.git\n```\n\nInstall the PHP dependencies:\n\n```bash\ncd form-components\ncomposer install\n```\n\n## Laravel installation\n\nMore commonly, you'll want to import these components for use in Laravel applications (or other frameworks that use Blade).\n\nTo install it using Composer, require the package:\n\n```bash\ncomposer require pod-point/form-components:^3.0\n```\n\nThen in Laravel, include the service provider in your `config/app.php` file:\n\n```php\nPodPoint\\FormComponents\\FormComponentsServiceProvider::class,\n```\n\n## Usage\n\nYou can insert components into Blade views using the `form::` package prefix.\n\n### Examples\nButton\n```php\n@include('form::_components.button', [\n    'name'     =\u003e 'myButton', // optional, sets name and id\n    'element'  =\u003e 'button', // optional, defaults to button\n    'text'     =\u003e 'Submit',\n    'attributes' =\u003e [ // optional\n        'type'     =\u003e 'submit',\n        'disabled' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'input' =\u003e 'myInputClass', // button - defaults to 'btn'\n    ],\n])\n\n@include('form::_components.button', [\n    'element'  =\u003e 'a',\n    'text'     =\u003e 'Cancel',\n    'attributes' =\u003e [ // optional\n        'href' =\u003e 'http://somewhere',\n        ...\n    ],\n])\n```\nCheckbox\n```php\n@include('form::_components.checkbox', [\n    'name'        =\u003e 'myCheckbox', // sets name and id\n    'labelText'   =\u003e 'Choose option(s)', // optional\n    'options'     =\u003e [\n        'option1' =\u003e 'Option 1',\n        'option2' =\u003e 'Option 2',\n    ],\n    'values'      =\u003e ['option1'], // optional default selected values\n    'attributes' =\u003e [ // optional\n        'disabled' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'formGroup' =\u003e 'myFormGroupClass', // outermost container div - defaults to 'form__group'\n        'label' =\u003e 'myLabelClass', // span that appears above all checkboxes - defaults to 'form__label'\n        'inputContainer' =\u003e 'myInputContainerClass', // label element container wrapping around each checkbox - defaults to 'checkbox form__field'\n        'input' =\u003e 'myInputClass', // input checkbox element - defaults to 'form__control'\n    ],\n])\n```\nFile upload\n```php\n@include('form::_components.file-upload', [\n    'name'       =\u003e 'myUpload', // sets name and id\n    'labelText'  =\u003e 'Upload your file', // optional\n    'attributes' =\u003e [ // optional\n        'disabled' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'formGroup' =\u003e 'myFormGroupClass', // container div - defaults to 'form__group'\n        'label' =\u003e 'myLabelClass', // label that appears above input - defaults to 'form__label'\n        'input' =\u003e 'myInputClass', // input file upload element - defaults to 'form__control form__field'\n    ],\n])\n```\nText/password input\n```php\n@include('form::_components.input', [\n    'name'        =\u003e 'myTextbox', // sets name and id\n    'type'        =\u003e 'text', // optional, defaults to 'text'\n    'value'       =\u003e 'Some text', // optional default value\n    'labelText'   =\u003e 'Type here', // optional\n    'explanation' =\u003e 'Explanation copy', // optional\n    'attributes' =\u003e [ // optional \n        'placeholder' =\u003e 'A hint to the user',\n        'required' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'formGroup' =\u003e 'myFormGroupClass', // container div - defaults to 'form__group'\n        'label' =\u003e 'myLabelClass', // label that appears above input - defaults to 'form__label'\n        'input' =\u003e 'myInputClass', // input element - defaults to 'form__control form__field'\n    ],\n])\n```\nRadio button(s)\n```php\n@include('form::_components.radio', [\n    'name'        =\u003e 'myRadio', // sets name and id\n    'labelText'   =\u003e 'Choose an option', // optional\n    'options'     =\u003e [\n        'option1' =\u003e 'Option 1',\n        'option2' =\u003e 'Option 2',\n    ],\n    'value'       =\u003e 'option1', // optional default selected value\n    'attributes' =\u003e [ // optional\n        'disabled' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'formGroup' =\u003e 'myFormGroupClass', // outermost container div - defaults to 'form__group'\n        'label' =\u003e 'myLabelClass', // span that appears above all radio buttons - defaults to 'form__label'\n        'inputContainer' =\u003e 'myInputContainerClass', // label element container wrapping around each radio button - defaults to 'radio form__field'\n        'input' =\u003e 'myInputClass', // input radio element - defaults to 'form__control'\n    ],\n])\n```\nSelect dropdown\n```php\n@include('form::_components.select', [\n    'name'        =\u003e 'mySelect', // sets name and id\n    'labelText'   =\u003e 'Choose an option',\n    'options'     =\u003e [\n        'option1' =\u003e 'Option 1',\n        'option2' =\u003e 'Option 2',\n    ],\n    'value'       =\u003e 'option1', // optional default selected value\n    'attributes' =\u003e [ // optional \n        'required' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'formGroup' =\u003e 'myFormGroupClass', // outermost container div - defaults to 'form__group'\n        'label' =\u003e 'myLabelClass', // label that appears above input - defaults to 'form__label'\n        'inputContainer' =\u003e 'myInputContainerClass', // div container wrapping around select - defaults to 'select form__field'\n        'input' =\u003e 'myInputClass', // select element - defaults to 'form__control'\n    ],\n])\n```\nTextarea\n```php\n@include('form::_components.textarea', [\n    'name'       =\u003e 'myTextarea', // sets name and id\n    'labelText'  =\u003e 'Type here', // optional\n    'value'      =\u003e 'Some text', // optional default value\n    'attributes' =\u003e [ // optional \n        'placeholder' =\u003e 'A hint to the user',\n        'required' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'formGroup' =\u003e 'myFormGroupClass', // container div - defaults to 'form__group'\n        'label' =\u003e 'myLabelClass', // label that appears above input - defaults to 'form__label'\n        'input' =\u003e 'myInputClass', // textarea element - defaults to 'form__control form__field'\n    ],\n])\n```\n\nGrouped typeahead select (Please note this depends on the [typeahead](https://pod-point.github.io/pod-point-ui-toolkit/typeahead.html) JS file)\n```php\n@include('form::_components.grouped-typeahead', [\n    'name'        =\u003e 'phoneNumber', // sets name and of the number field\n    'countryName' =\u003e 'country', // sets name and id of the country select field\n    'labelText'   =\u003e 'Type here', // optional\n    'options'     =\u003e $countryCodeOptions,\n    'value'       =\u003e 'GB',\n    'attributes' =\u003e [\n        'required' =\u003e true,\n        ...\n    ],\n    'classes' =\u003e [ // optional\n        'formGroup' =\u003e 'myFormGroupClass', // outermost container div - defaults to 'form__group'\n        'label' =\u003e 'myLabelClass', // label that appears above input - defaults to 'form__label'\n    ],\n])\n```\n\n### Attributes\nSome key attributes e.g. `name` can be set directly (see examples above for each component).\n\nFor all components, any additional attributes can be set using the `attributes` array.  These are optional.\n\n`attributes` can take text values where needed, e.g. \n```php\n...\n    'attributes' =\u003e [\n        'type' =\u003e 'submit',\n    ],\n...\n```\nor they can take boolean values - if a boolean value is used the attribute will be included if true e.g. `\u003cinput disabled\u003e` or omitted if false e.g. `\u003cinput\u003e`\n```php\n...\n    'attributes' =\u003e [\n        'disabled' =\u003e true,\n    ],\n...\n```\n\n### Classes\nFor all components, all `classes` are optional.\n\nIf an element's class is not specified, it defaults to the appropriate class(es) from the Pod Point UI toolkit - see each component below for details.\n\nIf you want an element to have no class set at all, set that element's class to `''` e.g.\n```php\n...\n    'classes' =\u003e [\n        'input' =\u003e '',\n    ],\n...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpod-point%2Fform-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpod-point%2Fform-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpod-point%2Fform-components/lists"}