2.0.2 • Published 5 years ago

@alaskaairux/ods-inputoptions v2.0.2

Weekly downloads
3
License
Apache-2.0
Repository
github
Last release
5 years ago

Build Status npm (scoped) NPM

ods-inputoption

<ods-inputoption> is a wrapper component for a HTML <input type"checkbox"> or <input type"radio"> elements containing styling and behavior.

Docs

All information regarding Project Setup, Technical Details, Tests and information regarding ODS Stateless Components can be found in the ./docs repository.

Install

$ npm i @alaskaairux/ods-inputoptions

Design Token CSS Custom Property dependency

The use of any ODS Component has a dependency on the ODS Design Tokens (npm install). See repository and API information here.

For additional details in regards to using Orion Design Tokens with components, please see ./docs/TECH_DETAILS.md

CSS Custom Property fallbacks

CSS Custom Properties are not supported in older browsers. For this, fallback properties are pre-generated and included with the npm. Any update to the Orion Design Tokens will be immediately reflected with browsers that support CSS Custom Properties, legacy browsers will require updated components with pre-generated fallback properties.

Define dependency in project component

Define the component dependency within each component that is using the \ component.

import "@alaskaairux/ods-inputoptions";

Reference component in HTML

<ods-inputoption></ods-inputoption>

See additional examples below.

Element ods-inputoption

inputoption use cases

The <ods-inputoptions> element should be used in situations where users may:

  • Want an element that can be turned on and off.
  • Have a collections of radio buttons describing a set of related options
  • Require users to check an options

inputoption groups

Using ods-inputoption required a group wrapper. Depending on wether the intention is to use radio buttons or checkboxes, depends on the group used.

For radio buttons, use:

<ods-inputoption-radio-group for="radioDemo1" label="Form label goes here">
  <ods-inputoption inputid="radio1" label="Yes" type="radio"></ods-inputoption>
  <ods-inputoption inputid="radio2" label="No" type="radio"></ods-inputoption>
</ods-inputoption-radio-group>

For checkboxes, use:

<ods-inputoption-checkbox-group for="checkboxDemo1" label="Form label goes here" horizontal>
  <ods-inputoption inputid="computers" label="Computers" name="checkboxDemo2" type="checkbox" value="computers"></ods-inputoption>
  <ods-inputoption inputid="music" label="Music" name="checkboxDemo2" type="checkbox" value="music"></ods-inputoption>![]()
</ods-inputoption-checkbox-group>

Properties: inputoption group

AttributeValue typeDescription
disabledbooleanenables disabled state of the element
errorstringset error message for button/checkbox group
forstringsets the for attribute for button/checkbox group label
horizontalbooleantoggles layout direction, default is vertical, max 3 options
labelstringsets content for button/checkbox group label

Properties: inputoption

AttributeValue typeDescription
checkedbooleanchecked="true"
idstringsets the individual id per element
labelstringsets content for button/checkbox label
namestringAccepts any string, DOMString representing the value of the input
typestringAccepts radio or checkbox to assume functional type
valuestringsets the elements input value

Examples

The following examples illustrate the use of ods-inputoption within the scope of either ods-inputoption-checkbox-group or ods-inputoption-radio-group.

Default radio button group

<ods-inputoption-radio-group for="radio1" label="Form label goes here">
  <ods-inputoption id="radio1" label="Yes" name="radioDemo1" type="radio" value="yes"></ods-inputoption>
  <ods-inputoption id="radio2" label="No" name="radioDemo1" type="radio" value="no"></ods-inputoption>
  <ods-inputoption id="radio3" label="Maybe" name="radioDemo1" type="radio" value="maybe"></ods-inputoption>
</ods-inputoption-radio-group>

Radio button group, horizontal option (limit 3 min breakpoint-narrow)

<ods-inputoption-radio-group for="radio4" label="Form label goes here" horizontal>
  <ods-inputoption id="radio4" label="Yes" name="radioDemo2" type="radio" value="yes"></ods-inputoption>
  <ods-inputoption id="radio5" label="No" name="radioDemo2" type="radio" value="no"></ods-inputoption>
  <ods-inputoption id="radio6" label="Maybe" name="radioDemo2" type="radio" value="maybe"></ods-inputoption>
</ods-inputoption-radio-group>

Radio button group with option set to checked

<ods-inputoption-radio-group for="radio13" label="Form label goes here">
  <ods-inputoption id="radio13" label="Yes" name="radioDemo4" type="radio" value="yes"></ods-inputoption>
  <ods-inputoption id="radio14" label="No" name="radioDemo4" type="radio" value="no" checked="true"></ods-inputoption>
  <ods-inputoption id="radio15" label="Maybe" name="radioDemo4" type="radio" value="maybe"></ods-inputoption>
</ods-inputoption-radio-group>

Radio button group set disabled

<ods-inputoption-radio-group for="radio16" label="Form label goes here" disabled>
  <ods-inputoption id="radio16" label="Yes" name="radioDemo5" type="radio" value="yes"></ods-inputoption>
  <ods-inputoption id="radio17" label="No" name="radioDemo5" type="radio" value="no" checked></ods-inputoption>
  <ods-inputoption id="radio18" label="Maybe" name="radioDemo5" type="radio" value="maybe"></ods-inputoption>
</ods-inputoption-radio-group>

Radio button group with error

<ods-inputoption-radio-group for="radio19" label="Form label goes here" error="Selection is required; please update.">
  <ods-inputoption id="radio19" label="Yes" name="radioDemo6" type="radio" value="yes"></ods-inputoption>
  <ods-inputoption id="radio20" label="No" name="radioDemo6" type="radio" value="no"></ods-inputoption>
  <ods-inputoption id="radio21" label="Maybe" name="radioDemo6" type="radio" value="maybe"></ods-inputoption>
</ods-inputoption-radio-group>

Default checkbox group

<ods-inputoption-checkbox-group for="computers" label="Form label goes here">
  <ods-inputoption id="computers" label="Computers" name="checkboxDemo1" type="checkbox" value="computers"></ods-inputoption>
  <ods-inputoption id="music" label="Music" name="checkboxDemo1" type="checkbox" value="music"></ods-inputoption>
  <ods-inputoption id="arts" label="Arts" name="checkboxDemo1" type="checkbox" value="arts"></ods-inputoption>
  <ods-inputoption id="sports" label="Sports" name="checkboxDemo1" type="checkbox" value="sports"></ods-inputoption>
  <ods-inputoption id="machines" label="Machines" name="checkboxDemo1" type="checkbox" value="machines"></ods-inputoption>
</ods-inputoption-checkbox-group>

Checkbox group, horizontal option (limit 3 min breakpoint-narrow)

<ods-inputoption-checkbox-group for="computers" label="Form label goes here" horizontal>
  <ods-inputoption id="computers" label="Computers" name="checkboxDemo2" type="checkbox" value="computers"></ods-inputoption>
  <ods-inputoption id="music" label="Music" name="checkboxDemo2" type="checkbox" value="music"></ods-inputoption>
  <ods-inputoption id="sports" label="Sports" name="checkboxDemo2" type="checkbox" value="sports"></ods-inputoption>
</ods-inputoption-checkbox-group>

Checkbox group with option set to checked

<ods-inputoption-checkbox-group for="computers" label="Form label goes here">
  <ods-inputoption id="computers" label="Computers" name="checkboxDemo4" type="checkbox" value="computers" checked></ods-inputoption>
  <ods-inputoption id="music" label="Music" name="checkboxDemo4" type="checkbox" value="music"></ods-inputoption>
  <ods-inputoption id="arts" label="Arts" name="checkboxDemo4" type="checkbox" value="arts"></ods-inputoption>
</ods-inputoption-checkbox-group>

Checkbox group set disabled

<ods-inputoption-checkbox-group for="checkboxDemo5" label="Form label goes here" disabled>
  <ods-inputoption id="computers" label="Computers" name="checkboxDemo5" type="checkbox" value="computers" checked></ods-inputoption>
  <ods-inputoption id="music" label="Music" name="checkboxDemo5" type="checkbox" value="music"></ods-inputoption>
  <ods-inputoption id="arts" label="Arts" name="checkboxDemo5" type="checkbox" value="arts"></ods-inputoption>
</ods-inputoption-checkbox-group>

Checkbox group with error

<ods-inputoption-checkbox-group for="computers" label="Form label goes here" error="Selection is required; please update.">
  <ods-inputoption id="computers" label="Computers" name="checkboxDemo6" type="checkbox" value="computers"></ods-inputoption>
  <ods-inputoption id="music" label="Music" name="checkboxDemo6" type="checkbox" value="music"></ods-inputoption>
  <ods-inputoption id="arts" label="Arts" name="checkboxDemo6" type="checkbox" value="arts"></ods-inputoption>
</ods-inputoption-checkbox-group>

Development

In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.

Please be sure to review the contribution guidelines for this project. Please make sure to pay special attention to the conventional commits section of the document.

Start development environment

Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open three different shell sessions. One is for the Gulp tasks, the second is for a series of npm tasks and the last is to run the Polymer server.

// shell terminal one
$ gulp dev

// shell terminal two
$ npm run dev

// shell terminal three
$ npm run serve
2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.1.7

6 years ago

1.1.6

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago