text-fieldpackage.web-types.json Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/text-field",
"version": "24.5.3",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-text-field",
"description": "`` is a web component that allows the user to input and edit text.\n\n```html\n` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n\n Sent to:\n @vaadin.com\n \n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------|------------\n`disabled` | Set to a disabled text field | :host\n`has-value` | Set when the element has a value | :host\n`has-label` | Set when the element has a label | :host\n`has-helper` | Set when the element has helper text or slot | :host\n`has-error-message` | Set when the element has an error message | :host\n`invalid` | Set when the element is invalid | :host\n`input-prevented` | Temporarily set when invalid input is prevented | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set to a readonly text field | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "error-message",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helper-text",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name-ref",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The value of the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "clear-button-visible",
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "allowed-char-pattern",
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autoselect",
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of this field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "placeholder",
"description": "A hint to the user of what can be entered in the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "When present, it specifies that the field is read-only.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "title",
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autocomplete",
"description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autocorrect",
"description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autocapitalize",
"description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "maxlength",
"description": "Maximum number of characters (in Unicode code points) that the user can enter.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "minlength",
"description": "Minimum number of characters (in Unicode code points) that the user can enter.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "pattern",
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helperText",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The value of the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "clearButtonVisible",
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "allowedCharPattern",
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autoselect",
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of this field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "placeholder",
"description": "A hint to the user of what can be entered in the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "When present, it specifies that the field is read-only.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "title",
"description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autocomplete",
"description": "Whether the value of the control can be automatically completed by the browser.\nList of available options at:\nhttps://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autocorrect",
"description": "This is a property supported by Safari that is used to control whether\nautocorrection should be enabled when the user is entering/editing the text.\nPossible values are:\non: Enable autocorrection.\noff: Disable autocorrection.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "autocapitalize",
"description": "This is a property supported by Safari and Chrome that is used to control whether\nautocapitalization should be enabled when the user is entering/editing the text.\nPossible values are:\ncharacters: Characters capitalization.\nwords: Words capitalization.\nsentences: Sentences capitalization.\nnone: No capitalization.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "maxlength",
"description": "Maximum number of characters (in Unicode code points) that the user can enter.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "minlength",
"description": "Minimum number of characters (in Unicode code points) that the user can enter.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "pattern",
"description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"events": [
{
"name": "validated",
"description": "Fired whenever the field is validated."
},
{
"name": "change",
"description": "Fired when the user commits a value change."
},
{
"name": "input",
"description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
},
{
"name": "invalid-changed",
"description": "Fired when the `invalid` property changes."
},
{
"name": "value-changed",
"description": "Fired when the `value` property changes."
}
]
}
}
]
}
}
}