Price Input
<sc-price-input></sc-price-input>
This component let users create price input.
- Preview
- Code
<sc-price-input label="Enter a price" currency-code="USD"></sc-price-input><sc-price-input label="Enter a price" currency-code="EUR"></sc-price-input>
Component Codex
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| autofocus | The input's autofocus attribute. | boolean | |
| clearable | Adds a clear button when the input is populated. | boolean | false |
| currencyCode | 3 letter currency code for input | string | |
| disabled | Disables the input. | boolean | false |
| hasFocus | Inputs focus | boolean | |
| help | The input's help text. | string | '' |
| invalid | This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API. | boolean | false |
| label | The input's label. | string | |
| max | The input's maximum value. | number | |
| maxlength | The maximum length of input that will be considered valid. | number | |
| min | The input's minimum value. | number | |
| minlength | The minimum length of input that will be considered valid. | number | |
| name | The input's name attribute. | string | |
| pill | Draws a pill-style input with rounded edges. | boolean | false |
| placeholder | The input's placeholder text. | string | |
| readonly | Makes the input readonly. | boolean | false |
| required | Makes the input a required field. | boolean | false |
| showCode | Show the currency code with the input | boolean | |
| showLabel | Should we show the label | boolean | true |
| size | The input's size. | "large" | "medium" | "small" | 'medium' |
| value | The input's value attribute. | string | '' |
Events
| Event | Description | Type |
|---|---|---|
scBlur | Emitted when the control loses focus. | CustomEvent<void> |
scChange | Emitted when the control's value changes. | CustomEvent<void> |
scFocus | Emitted when the control gains focus. | CustomEvent<void> |
scInput | Emitted when the control's value changes. | CustomEvent<void> |
Methods
reportValidity() => Promise<boolean>
setCustomValidity(message: string) => Promise<void>
Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
triggerBlur() => Promise<void>
Removes focus from the input.
triggerFocus(options?: FocusOptions) => Promise<void>
Sets focus on the input.
Shadow Parts
| Part | Description |
|---|---|
base | The elements base wrapper. |
help-text | Help text that describes how to use the input. |
input | The html input element. |
prefix | Used to prepend an icon or element to the input. |
suffix | Used to prepend an icon or element to the input. |