https://github.com/karolis-sh/netlify-cms-widget-inline-select

Radio and multiple select checkboxes widget for Netlify CMS
https://github.com/karolis-sh/netlify-cms-widget-inline-select

cms gatsby multi-checkbox netlify netlify-cms radio react widget

Last synced: 4 months ago
JSON representation

Radio and multiple select checkboxes widget for Netlify CMS

• Host: GitHub
• URL: https://github.com/karolis-sh/netlify-cms-widget-inline-select
• Owner: karolis-sh
• License: mit
• Created: 2018-12-03T16:05:08.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-09-24T06:35:33.000Z (over 3 years ago)
• Last Synced: 2024-08-16T04:23:56.101Z (6 months ago)
• Topics: cms, gatsby, multi-checkbox, netlify, netlify-cms, radio, react, widget
• Language: JavaScript
• Homepage: https://netlify-cms-widget-inline-select.netlify.com/
• Size: 3.22 MB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# netlify-cms-widget-inline-select

[![npm version][version-badge]][version]

![Node.js CI](https://github.com/karolis-sh/netlify-cms-widget-inline-select/workflows/Node.js%20CI/badge.svg)

[![License: MIT][license-badge]][license]

[![code style: prettier][code-style-badge]][code-style]

Inline radio + multi-checkboxes select widget. Check out [the demo](https://netlify-cms-widget-inline-select.netlify.com/demo)!

![preview](docs/preview.png)

## Install

```shell

npm i netlify-cms-widget-inline-select

```

or

```shell

yarn add netlify-cms-widget-inline-select

```

## Setup

```js

import { InlineSelectControl, InlineSelectPreview } from 'netlify-cms-widget-inline-select';

CMS.registerWidget('inline-select', InlineSelectControl, InlineSelectPreview);

```

## How to use

Add to your Netlify CMS configuration:

```yaml

fields:

  - name: radio_select

    label: Radio select

    widget: inline-select

    options: ['left', 'center', 'right']

```

## Configuration

- `options` - selection list (you can also specify the `value` and `label` separately)

```yaml

fields:

  - name: radio_select

    label: Most recent framework

    widget: inline-select

    options:

      - { value: react, label: React }

      - { value: angular, label: Angular 1.x }

      - { value: vue, label: Vue.js }

      - { value: $, label: jQuery }

```

- `multiple` - ability to select multiple items

```yaml

fields:

  - name: checkboxes_select

    label: Favorite frameworks

    widget: inline-select

    multiple: true

    options: ['React', 'Angular', 'Vue', 'Other']

```

[version-badge]: https://badge.fury.io/js/netlify-cms-widget-inline-select.svg

[version]: https://www.npmjs.com/package/netlify-cms-widget-inline-select

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg

[license]: https://opensource.org/licenses/MIT

[code-style-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg

[code-style]: https://github.com/prettier/prettier

[unpkg-bundle]: https://unpkg.com/netlify-cms-widget-inline-select/lib/