Component: Checkbox

[patrickarlt]

Esri/calcite-web#1030

Also See: https://ionicframework.com/docs/api/checkbox

[paulcpederson]

Adding @vcolavin to this one and giving a bit more information.

In ArcGIS Online we currently use a hacky adjacent selector CSS solution which we lightly wrap in a widget. Here is the relevant bits of that implementation, plus a kind of typeScript spec of what we need features wise: https://codepen.io/paulcp/pen/yWGLYK

We're looking to have something along the lines of:

<label>
  <calcite-checkbox checked disabled large color="white"></checkbox>
  This option is checked, disabled, large, and white
</label> 

<label>
  <calcite-checkbox indeterminate color="transparent"></checkbox>
  This option is mixed and meant to exist on top of an image. 
</label> 

Previous designs for this component:

@vcolavin Have a look at the components people have already written and take a crack at it. Pretty early days so things like CSS class name methodology aren't totally finalized, but we can back fill any important decisions we make as a team.

[paulcpederson]

updates to spec based on #24

1. Allow optionally passing in an input. This helps bind for other frameworks:

<label>
  <calcite-checkbox checked></checkbox>
  Standard checkbox
</label> 

<label>
  <calcite-checkbox>
    <input type="checkbox"> <!-- Angular would bind to this -->
  </checkbox>
  Checkbox passed in to override default internal checkbox via a slot
</label> 

2. Event name should now be calciteCheckboxChange I believe as we are moving towards namespacing our events to calcite and the component name.

[vcolavin]

@paulcpederson do we want to support something like this use case?

<calcite-checkbox id='my-id' />

<!-- some other stuff -->

<label for='my-id>label is over here</label>

[paulcpederson]

Yeah I think we won't document that, but if it's possible it would be good to support as some devs probably are used to this method of labeling form controls.

[kumarGayu]

for label we might have to use calcite-label #31. However, the development of the label component should not affect check box component development I believe.