Skip to main content

Price Input


This component let users create price input.

Component Codex


autofocusThe input's autofocus attribute.boolean
clearableAdds a clear button when the input is populated.booleanfalse
currencyCode3 letter currency code for inputstring
disabledDisables the input.booleanfalse
hasFocusInputs focusboolean
helpThe input's help text.string''
invalidThis 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.booleanfalse
labelThe input's label.string
maxThe input's maximum value.number
maxlengthThe maximum length of input that will be considered valid.number
minThe input's minimum value.number
minlengthThe minimum length of input that will be considered valid.number
nameThe input's name attribute.string
pillDraws a pill-style input with rounded edges.booleanfalse
placeholderThe input's placeholder text.string
readonlyMakes the input readonly.booleanfalse
requiredMakes the input a required field.booleanfalse
showCodeShow the currency code with the inputboolean
showLabelShould we show the labelbooleantrue
sizeThe input's size."large" | "medium" | "small"'medium'
valueThe input's value attribute.string''


scBlurEmitted when the control loses focus.CustomEvent<void>
scChangeEmitted when the control's value changes.CustomEvent<void>
scFocusEmitted when the control gains focus.CustomEvent<void>
scInputEmitted when the control's value changes.CustomEvent<void>


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

baseThe elements base wrapper.
help-textHelp text that describes how to use the input.
inputThe html input element.
prefixUsed to prepend an icon or element to the input.
suffixUsed to prepend an icon or element to the input.