frost-checkbox.md

frost-checkbox

A check in a box, a checkbox

• API
• Examples

API

Attribute	Type	Value	Description
autofocus	boolean	false	default - basic checkbox
		true	sets focus on checkbox
checked	boolean	false	default - basic checkbox
		true	checked checkbox
class	string	error	sets checkbox to error state
disabled	boolean	false	default - basic checkbox
		true	disabled checkbox
hook	string	<unique-name>	name used for testing with ember-hook
label	string	<label-name>	label for the checkbox
onBlur	string	<action-name>	triggers associated action when the checkbox loses focus
onFocus	string	<action-name>	triggers associated action when the checkbox receives focusin event
onInput	string	<action-name>	The action callback to call when the value of the checkbox changes as the user clicks
options	object	{<attributes>}	property object used to spread the attributes to the top level of the component with ember-spread.
size	string	small	default - small size checkbox
		medium	medium size checkbox
		large	large size checkbox

Testing with ember-hook

The checkbox component is accessible using ember-hook:

• Top level hook - $hook('<hook-name>')
• Input - $hook('<hook-name>-checkbox-input')
• Label - $hook('<hook-name>-checkbox-label')

Spread attributes

The checkbox component use ember-spread to spread a property object against the top level of the component.

Examples

Default

{{frost-checkbox}}

Autofocus

{{frost-checkbox
  autofocus=true
}}

Checked

{{frost-checkbox
  checked=true
}}

Disabled - checked

{{frost-checkbox
  disabled=true
  checked=true
}}

Disabled - not checked

{{frost-checkbox
  disabled=true
}}

Error

{{frost-checkbox
  class='error'
}}

Label

{{frost-checkbox
  label='label'
}}

Size

{{frost-checkbox
  size='large'
}}

Events - onBlur

{{frost-checkbox
  onBlur=(action 'onBlurHandler')
}}

Events - onFocus

{{frost-checkbox
  onFocus=(action 'onFocusHandler')
}}

Events - onInput

{{frost-checkbox
  onInput=(action 'onInputHandler')
}}

Spread

{{frost-checkbox
  options=(hash
    checked=true
  )
}}