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-inputoptionsDesign 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 <ods-inputoptions> 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
| Attribute | Value type | Description |
|---|---|---|
| disabled | boolean | enables disabled state of the element |
| error | string | set error message for button/checkbox group |
| for | string | sets the for attribute for button/checkbox group label |
| horizontal | boolean | toggles layout direction, default is vertical, max 3 options |
| label | string | sets content for button/checkbox group label |
Properties: inputoption
| Attribute | Value type | Description |
|---|---|---|
| checked | boolean | checked="true" |
| id | string | sets the individual id per element |
| label | string | sets content for button/checkbox label |
| name | string | Accepts any string, DOMString representing the value of the input |
| type | string | Accepts radio or checkbox to assume functional type |
| value | string | sets 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