If you put anchor in checkbox it is not possible to navigate to it. For example:

<paper-checkbox>I accept <a href="#">Terms and Conditions</a></paper-checkbox>

The checkbox is not square if the label is longer than the available element space.

Example:

<paper-checkbox>Very long option that squeezes the checkbox</paper-checkbox>

See the checkbox if the space is not sufficient:

Hey all,

Sorry if this has been brought up before, but I was not able to find an answer to my question. Basically, I would like to switch the label and checkbox positions for our system, but I haven't found a way to do this. This is what it looks like currently.

I quickly photoshopped what I want it to look like. Is it possible to do this under the current version?

Thanks!

• Ripple should always be centered, regardless of where the touch/click occured.
• Opacity of ripple might be a bit high: http://www.google.com/design/spec/components/selection-controls.html#

Is it possible to extend this element? I have seen the docs for 0.5 but that is outdated and doesn't support this version. Any other link to doc that tells how to extend this 1.0?

Btw. if you use native HTML input element like it's used in paper-input with base element paper-input-container then it will be much easy to bind it with other libraries like AngularJS.

https://www.polymer-project.org/1.0/components/paper-elements/demo.html#paper-checkbox

Error: Uncaught TypeError: this._ripple.uiDownAction is not a function

The issue here is a bit difficult to track down but essentially I'm using paper-checkbox and paper-behaviors. The issue only shows up on first click of each instantiated item after that its fine. The checkbox has behaviors and doesn't act like its broken, but there is a console error. I included an image of the console. Using newest version of chrome, serving with gulp.

my use:
paper-checkbox checked="{{task.completed}}"></paper-checkbox

my imports:
paper-behaviors/paper-button-behavior
paper-behaviors/paper-inky-focus-behavior
paper-behaviors/paper-ripple-behavior
paper-checkbox/paper-checkbox
paper-behaviors/paper-checked-element-behavior

Go to

https://elements.polymer-project.org/elements/paper-checkbox?view=demo:demo/index.html&active=paper-checkbox

Click a checkbox.
Switch to another tab.
Switch back.
The checkbox ripples for no reason.

Clicking in the URL bar and then back into the webcontents instead of switching tabs also exhibits this behavior.

Expected outcome

When a checkbox with the noink attribute is right-clicked, it should not show any ripple effect at all.

Actual outcome

The checkbox has a circle appear when right-clicked.

Steps to reproduce

1. Put a paper-checkbox element in the page.
2. Open the page in a web browser.
3. Right click the paper-checkbox element.

This seemed to fix the problem for me:

paper-checkbox {
    --paper-checkbox-unchecked-ink-color: transparent;
    --paper-checkbox-checked-ink-color: transparent;
}

Hello,

is there any reason to have a translateZ(0) on the checkbox container ? It creates a layer that needs compositing and might affect our goal of 60 fps on mobile devices.

Thanks

The documentation for paper-checkbox says that the toggles flag has a default of false, however this does not appear to be the case:

https://github.com/PolymerElements/iron-checked-element-behavior/blob/master/iron-checked-element-behavior.html#L52

Due to Polymer/polymer#1812 it is impossible to use the following markup to clear the toggles flag:

<paper-checkbox toggles="false>

What is the recommended way to set this property in markup?

I have an object from firebase-document with booleans inside it and am using two way databinding to update them. If the object changes the checkmark and its value change accordingly but the background-color of the checkbox is never changed.

Here are the a11y developer tools audit results:

[Warning] Text elements should have a reasonable contrast ratio (1)
See AX_COLOR_01 for more information.
Not applicable tests (7)
Passing tests (7)

For the most part, the contrast looks good to me. The only item that is too light is the disabled unchecked checkbox, which I understand is light intentionally. If we can make that just slightly more visible, that would be great.

Code:

<div style="-webkit-column-count:4;">
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
  <paper-checkbox>Checkbox</paper-checkbox>
</div>

Click some checkboxes to turn them on, and observe and for some reason the white checkmark is only visible in the first column, the rest show a solid square when checked

Using paper-checkboxes, I've hit a scenario where I would like to sometimes ignore all user-input sent to a paper-checkbox.

Reading the docs, toggles=false sounds like it might be what I'm looking for. However, I cannot get toggles to do anything most of the time. I'm able to prevent the user from checking an unchecked box (over in iron-button-state, active is always set to "false" whenever toggles is false) - inconsistently.

Is this how the toggles attribute should work?

disabled might really be what I'm looking for, instead... I just wanted some clarification on toggles

http://codepen.io/robrez/pen/MwmdRN?editors=100

An indeterminate state would be very useful, and in fact necessary in my case, which is that of a treeview of checkable items.

An idea for an API: an indeterminate property that when set interprets the checked property as true for checked, false for unchecked and null or undefined as indeterminate.

See https://github.com/PolymerElements/paper-checkbox/blob/03efcd3/paper-checkbox.html#L268.

PaperInkyFocusBehaviorImpl should only be referenced internally by PaperInkyFocusBehavior.

I have some issues like this
testChecked = false;
i use this attribute checked="{{testChecked}}" but its not working, this checkbox always checked.

<paper-checkbox noripple></paper-checkbox>

This can be useful when the checkbox is inside an element which also has a ripple.

The element works very well on Safari/iPhone however behavior is slightly lagging on Chrome/Android, when multiple checkboxes are visible below each other and quickly toggling the items, not every tap is registered properly.

Not sure if i did anything wrong, on the demo page works well but when i install it on my app and place it on the page the checkbox is not displayed and paper-ripple cover all page, i mean, if i click anywhere on the page it shows the ripple, see image:

Hello!
In my app developed in Ruby on Rails, rel import for css not work, I like to know why use import instead a rel="stylesheet", because I changed this and worked.
Thanks, and sorry for bad english =/

Since the latest update (1.0.6) my labels are not visible on paper-checkbox.
It appears to be related to the addition of a trim() call on line 113 of paper-checkbox.html.

Once the label has been hidden, changes to <content></content> do not show the label again.
It only affects labels that have a binding as text labels have a value when the paper-checkbox is attached.

  <dom-module id="polymer-test">
    <template>
      <paper-checkbox>{{label}}</paper-checkbox>
    </template>
  </dom-module>
  <script>
    Polymer({
      is: 'polymer-test',
      ready: function () {
        this.label = 'Label Value';
      }
    });
  </script>
  <polymer-test></polymer-test>

For our work on Chrome History UI we need to make paper-checkbox slightly smaller (16x16). It would be good to be able to change the width and height with css variables as in iron-icon (--paper-checkbox-width).

Right now, the checkbox size is hardcoded to 18px.
It would be nice to expose a size variable somehow, maybe with calc for the other elements that comprise the checkbox to adjust to user given sizes.

Hello,

it seems paper-checkbox (and paper-toggle) doesn't implement Polymer.IronFormElementBehavior, so it's not handled by the iron-form element (at least the .serialize() output)

Anthony

I've added styling for the paper-checkbox, but the --paper-checkbox-label-spacing attribute seems to be ignored. I've tried setting it to different values, but the spacing between the box and label is always 8px. Modifying other attributes, such as --paper-checkbox-checked-color, works as expected.

Description

Links within the checkbox label don't receive a click events. Instead, any interaction with the checkbox only toggles the checked state.

Expected outcome

Clicked links should follow the href, not to toggle the checked property.

Actual outcome

Clicking a link within the checkbox label doesn't follow the link. It just toggles the checked state.

Steps to reproduce

1. Use the following HTML: <paper-checkbox>This is the label <a href="http://google.com">with a link</a>.</paper-checkbox>
2. Click the link.

#94 fixed misused comparison operators in a few assertions, revealing that the tests they were part of actually failed.

https://github.com/PolymerElements/paper-checkbox/blob/master/paper-checkbox.html#L47

As per title, when I place a <paper-checkbox> inside a <template> it will trigger the _forwardInstanceProp with initialized checked state, whilst other elements do not do this. When I tried reproducing this in a simple scenario (with Templatizr) both seemed to behave exactly the same way (triggering listeners and the like at the same points), however in conjuction with Templatizr there is a difference somewhere.

In paper-checkbox, one can style pair: unchecked-background-color and unchecked-color
Unfortunately for checked style there is only checked-color attribute.
Could you please add --paper-checkbox-checked-background-color style attribute in order to complement the functionality of styling?

Thank you in advance

Could you add Indeterminate state just like element tristate-checkbox?

https://github.com/johnthad/tristate-checkbox

on paper-checkbox (v1.0.5) demo page:

• hit tab key to focus one of the checkbox
• hit enter/spacebar to toggle the checkbox (works fine as expected)
• use mouse to click on the checkbox to toggle
• hit tab key to focus the next checkbox
• now hit enter/spacebar again to toggle the checkbox (not working!)

Would also be nice to be able to set the checked label color.
I'm plugging this with !important style in my CSS - maybe there is a better way?

paper-checkbox[checked] div {
    color: green !important;
}

Demo code in: https://github.com/PolymerElements/paper-checkbox/blob/master/demo/index.html
does no reflect what we see in: https://elements.polymer-project.org/elements/paper-checkbox?view=demo:demo/index.html&active=paper-checkbox

paper-checkbox sets the aria-pressed attribute on itself, in addition to the aria-checked attribute (-pressed mirrors -checked). This causes screen readers (at least ChromeVox) to announce that it's pressed (or not pressed) in addition to announcing that it's checked.

This is redundant/verbose, and I think not the intended use of aria-pressed (only for toggle buttons, see: http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed).

Currently <paper-checkbox>Foo</paper-checkbox will set foo as the value for aria-label.

If, however, the text content is passed to paper-checkbox via a content element, it will set aria-label to empty space, which forces the screen reader to read (silence), unchecked, checkbox.

ex:

<!-- todo-item.html -->
<template>
  <paper-checkbox>
    <content></content>
  </paper-checkbox>
</template>

<!-- todo-list.html -->
<template>
  <template is="dom-repeat" items="{{todos}}">
    <todo-item>
      <span>{{item.title}}</span>
    </todo-item>
  </template>
</template>

It seems that I have to wrap the item.title in a span because just doing <todo-item>{{item.title}}</todo-item> renders {{item.title}} on screen.

It's common to have a global rule that sets box sizing:

* {
    box-sizing: border-box;
}

However, due to shady, this pierces into the local dom and affects the checkbox positioning:

One solution is to use box-sizing: content-box; on the checkbox.

At https://www.polymer-project.org/1.0/components/paper-elements/demo.html#paper-checkbox, if you tab among checkboxes, there's no indication which one has focus.

See also thomaspark/bootswatch#505 (comment)

Could you please add style variables to #checkbox background-color and #checkmark border-color?

Thank you in advance

Sizing the paper-checkbox element in any way such that the label starts to need to wrap causes the label to flow outside of the width of the element. The label appears to not wrap for a width that of the checkbox div outside of the entire element. In other words, getting rid of the checkbox div fixes the issue.

Below is the usage of the checkbox in my app (excuse the label 😝):

And here is a reduced test case.

The issue is present in latest Firefox security release (44.0), as well as Chrome 50.0.2633.3. I don't have access to others.

Note: Please note that the first rounds of accessibility testing / issue reporting were done using Chrome on Mac with VoiceOver enabled, as well as Chrome on Chrome OS with ChromeVox enabled. This next round was done on the Windows platform, on both Chrome and Firefox with the NVDA screen reader enabled. Once the team addresses the issues across platforms and screen readers, we will also do a final test using Windows and the JAWS screen reader, a heavily used combo that certainly needs to work smoothly.

Issues:

Firefox /  NVDA: 
When navigating between checkboxes, I hear ""blank"" as if NVDA is identifying that the white space is an item that should be read aloud. This occurs after reading the longer checkbox descriptions (e.g. ""notify me about updates to apps""). This does not occur at the bottom of the page on the checkboxes without sub descriptions. 
"

Description

Using paper-checkbox in a nested dom-if template is causing more than one checkbox to change state when I interact with one.

<template is='dom-bind'>
    <table>
        <template is="dom-repeat" items="[[true, false, true],[false, false, true],[true, false, true]]" as="row">
            <tr>
                <template is="dom-repeat" items="[[row]]" as="col">
                    <td><paper-checkbox checked="{{col}}">{{col}}</paper-checkbox>
                    </td>
                </template>
            </tr>
        </template>
    </table>
</template>

Expected outcome

Only one checkbox would change at a time

Actual outcome

More than one checkbox changes

Live Demo

https://jsbin.com/hidaridoja/edit?html,output

Steps to reproduce

Click multiple times in the checkboxes in the middle column. Eventually you will see how more than one checkbox changes state.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8 ?
• Safari 7 ?
• Edge ?
• IE 11 ?
• IE 10 ?

:host-context([dir="rtl"]) #ink

should be

#ink:dir(rtl) I think?

:host-context and attribute selectors will be expensive.

The padding for the "checkboxLabel" div stays even when the label is empty which causes the check box to be slightly bigger and mess up some styling. Is there a way around this without having to custom style every check box that doesn't have a label?

Not sure if this is the proper place to report this or if it should be an issue with webcomponents.js or vulcanize.

In the Safari Browser, a non-vulcanized paper-checkbox works perfectly. Once vulcanize takes place the actual checkbox does not render (only the label is visible) and the paper-ripple covers everything above paper-checkbox which results in a ripple no matter where on the page above the checkbox a click occurs.

Investigation into this shows that the styles for the "paper-checkbox #checkbox.paper-checkbox" are not present in Safari for a vulcanized paper-checkbox. I did not compare styles going up the DOM tree so not sure if something is missing there or not.

UPDATE 1:
Don't know if this helps or just clutters this issue. But, if I include these styles in my CSS it fixes the issue I described above (copied from Chrome Developer Tools and pasted into stylesheet):

paper-checkbox {
display: inline-block;
white-space: nowrap;
}

checkbox.checked {

background-color: @default-primary-color;
border-color: @default-primary-color;

}

checkboxContainer.paper-checkbox {

display: inline-block;
position: relative;
width: 18px;
height: 18px;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
vertical-align: middle;

}

checkboxLabel.paper-checkbox {

position: relative;
display: inline-block;
vertical-align: middle;
padding-left: 8px;
white-space: normal;
pointer-events: none;

}

checkbox.paper-checkbox {

position: relative;
box-sizing: border-box;
height: 100%;
border: solid 2px;
border-radius: 2px;
pointer-events: none;
-webkit-transition: background-color 140ms, border-color 140ms;
transition: background-color 140ms, border-color 140ms;

}

checkbox.checked.paper-checkbox #checkmark.paper-checkbox {

-webkit-animation: checkmark-expand 140ms ease-out forwards;
animation: checkmark-expand 140ms ease-out forwards;

}

checkmark.paper-checkbox {

-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: -1px;
left: 4px;
width: 5px;
height: 10px;
border-style: solid;
border-top: none;
border-left: none;
border-right-width: 2px;
border-bottom-width: 2px;
border-color: white;

}

Since users often create many instances of this element, it will especially benefit from performance optimization. Consider lazily creating optional or user initiated functionality (e.g. paper-ripple), leveraging behaviors over composition (e.g. paper-material), streamlining styling, and eliminating or simplifying features (e.g. behaviors)

For lists with a "Select All" checkbox, or for displays like this compatibility matrix, an in-between (commonly called indeterminate) state is necessary. Here are some examples:

I propose the following addition:

<paper-checkbox indeterminate> label</paper-checkbox>

Where this will always give the checkbox an indeterminate state. This might override the checked state, so the following:

<paper-checkbox indeterminate> label</paper-checkbox>
<paper-checkbox checked indeterminate> label</paper-checkbox>
<paper-checkbox indeterminate checked> label</paper-checkbox>

would all render exactly the same way.