import DisabledProperty from '@ovhcloud/ods-stencil-quantity/docs/osds-quantity/properties/usage.disabled.mdx';
import GenericStyle from '@ovhcloud/ods-core/docs/generic-style.mdx';

<GenericStyle />

## Usage

### Default
#### using ODS components
```html
<osds-quantity>
  <osds-button slot="minus" color="primary" size="sm">-</osds-button>
  <osds-input style="max-width: 45px" type="number" color="primary" min="1" max="10" step="1" value="1"></osds-input>
  <osds-button slot="plus" color="primary" size="sm">+</osds-button>
</osds-quantity>
```

#### using vanilla elements
```html
<osds-quantity>
  <button slot="minus">-</button>
  <input style="max-width: 45px" type="number" min="1" max="10" step="1" value="1"/>
  <button slot="plus">+</button>
</osds-quantity>
```
### Disabled
<DisabledProperty />