graycoreio/daffodil

<h1>Quantity Field</h1>
<p>Quantity field is a form control element that switches between a native select and input element.</p>

<h2>Overview</h2>
<p>Quantity field is intended for use with cart items and product quantities. The maximum number accepted in a quantity select is configurable and set to 10 by default. It will switch to a quantity input if 10+ is selected.</p>

<h2>Range Limits</h2>
The default allowed range of numbers is 1 to 500. This can be changed by passing in the desired min and max values as inputs. Note that this does not validate the actual input. It merely informs the select which options it should generate and sets the input's min and max attributes. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#min" target="_blank">input min</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max" target="_blank">input max</a> for more information.

<h2>Usage</h2>
<h3>Basic</h3>
<design-land-example-viewer-container example="basic-quantity-field"></design-land-example-viewer-container>

<h3>Disabled</h3>
<design-land-example-viewer-container example="disabled-quantity-field"></design-land-example-viewer-container>

<h3>Custom Select Max Value (15)</h3>
<p>The value at which the field will switch to using an input is configurable.</p>
<design-land-example-viewer-container example="select-max-quantity-field"></design-land-example-viewer-container>

<h3>Custom Range Limits (5 - 50)</h3>
<p>The absolute minimum and maximum values can be specified.</p>
<design-land-example-viewer-container example="custom-range-quantity-field"></design-land-example-viewer-container>