govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
182 lines (181 loc) • 6.78 kB
JSON
[
{
"name": "id",
"type": "string",
"required": true,
"description": "The ID of the input."
},
{
"name": "name",
"type": "string",
"required": true,
"description": "The name of the input, which is submitted with the form data."
},
{
"name": "value",
"type": "string",
"required": false,
"description": "Optional initial value of the input."
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"description": "If `true`, input will be disabled."
},
{
"name": "describedBy",
"type": "string",
"required": false,
"description": "One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users."
},
{
"name": "label",
"type": "object",
"required": true,
"description": "The label used by the text input component.",
"isComponent": true
},
{
"name": "hint",
"type": "object",
"required": false,
"description": "Can be used to add a hint to a text input component.",
"isComponent": true
},
{
"name": "errorMessage",
"type": "object",
"required": false,
"description": "Can be used to add an error message to the text input component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
"isComponent": true
},
{
"name": "formGroup",
"type": "object",
"required": false,
"description": "Additional options for the form group containing the text input component.",
"params": [
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the form group (for example to show error state for the whole group)."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the form group."
},
{
"name": "beforeInput",
"type": "object",
"required": false,
"description": "Content to add before the input used by the text input component.",
"params": [
{
"name": "text",
"type": "string",
"required": true,
"description": "Text to add before the input. If `html` is provided, the `text` option will be ignored."
},
{
"name": "html",
"type": "string",
"required": true,
"description": "HTML to add before the input. If `html` is provided, the `text` option will be ignored."
}
]
},
{
"name": "afterInput",
"type": "object",
"required": false,
"description": "Content to add after the input used by the text input component.",
"params": [
{
"name": "text",
"type": "string",
"required": true,
"description": "Text to add after the input. If `html` is provided, the `text` option will be ignored."
},
{
"name": "html",
"type": "string",
"required": true,
"description": "HTML to add after the input. If `html` is provided, the `text` option will be ignored."
}
]
}
]
},
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the input."
},
{
"name": "autocomplete",
"type": "string",
"required": false,
"description": "Attribute to meet [WCAG success criterion 1.3.5: Identify input purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html). See the [Autofill section in the HTML standard](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used. Default is `\"current-password\"`."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the input."
},
{
"name": "showPasswordText",
"type": "string",
"required": false,
"description": "Button text when the password is hidden. Defaults to `\"Show\"`."
},
{
"name": "hidePasswordText",
"type": "string",
"required": false,
"description": "Button text when the password is visible. Defaults to `\"Hide\"`."
},
{
"name": "showPasswordAriaLabelText",
"type": "string",
"required": false,
"description": "Button text exposed to assistive technologies, like screen readers, when the password is hidden. Defaults to `\"Show password\"`."
},
{
"name": "hidePasswordAriaLabelText",
"type": "string",
"required": false,
"description": "Button text exposed to assistive technologies, like screen readers, when the password is visible. Defaults to `\"Hide password\"`."
},
{
"name": "passwordShownAnnouncementText",
"type": "string",
"required": false,
"description": "Announcement made to screen reader users when their password has become visible in plain text. Defaults to `\"Your password is visible\"`."
},
{
"name": "passwordHiddenAnnouncementText",
"type": "string",
"required": false,
"description": "Announcement made to screen reader users when their password has been obscured and is not visible. Defaults to `\"Your password is hidden\"`."
},
{
"name": "button",
"type": "object",
"required": false,
"description": "Optional object allowing customisation of the toggle button.",
"params": [
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the button."
}
]
}
]