govuk-frontend
Version:
GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
230 lines (229 loc) • 9.14 kB
JSON
[
{
"name": "describedBy",
"type": "string",
"required": false,
"description": "One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users."
},
{
"name": "fieldset",
"type": "object",
"required": false,
"description": "Can be used to add a fieldset to the checkboxes component.",
"isComponent": true
},
{
"name": "hint",
"type": "object",
"required": false,
"description": "Can be used to add a hint to the checkboxes component.",
"isComponent": true
},
{
"name": "errorMessage",
"type": "object",
"required": false,
"description": "Can be used to add an error message to the checkboxes 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 checkboxes 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": "beforeInputs",
"type": "object",
"required": false,
"description": "Content to add before all checkbox items within the checkboxes component.",
"params": [
{
"name": "text",
"type": "string",
"required": true,
"description": "Text to add before all checkbox items. If `html` is provided, the `text` option will be ignored."
},
{
"name": "html",
"type": "string",
"required": true,
"description": "HTML to add before all checkbox items. If `html` is provided, the `text` option will be ignored."
}
]
},
{
"name": "afterInputs",
"type": "object",
"required": false,
"description": "Content to add after all checkbox items within the checkboxes component.",
"params": [
{
"name": "text",
"type": "string",
"required": true,
"description": "Text to add after all checkbox items. If `html` is provided, the `text` option will be ignored."
},
{
"name": "html",
"type": "string",
"required": true,
"description": "HTML to add after all checkbox items. If `html` is provided, the `text` option will be ignored."
}
]
}
]
},
{
"name": "idPrefix",
"type": "string",
"required": false,
"description": "Optional prefix. This is used to prefix the `id` attribute for each checkbox item input, hint and error message, separated by `-`. Defaults to the `name` option value."
},
{
"name": "name",
"type": "string",
"required": true,
"description": "Name attribute for all checkbox items."
},
{
"name": "items",
"type": "array",
"required": true,
"description": "The checkbox items within the checkboxes component.",
"params": [
{
"name": "text",
"type": "string",
"required": true,
"description": "If `html` is set, this is not required. Text to use within each checkbox item label. If `html` is provided, the `text` option will be ignored."
},
{
"name": "html",
"type": "string",
"required": true,
"description": "If `text` is set, this is not required. HTML to use within each checkbox item label. If `html` is provided, the `text` option will be ignored."
},
{
"name": "id",
"type": "string",
"required": false,
"description": "Specific ID attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
},
{
"name": "name",
"type": "string",
"required": false,
"description": "Specific name for the checkbox item. If omitted, then component global `name` string will be applied."
},
{
"name": "value",
"type": "string",
"required": true,
"description": "Value for the checkbox input."
},
{
"name": "label",
"type": "object",
"required": false,
"description": "Subset of options for the label used by each checkbox item within the checkboxes component.",
"isComponent": true,
"params": [
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the label tag."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the label tag."
}
]
},
{
"name": "hint",
"type": "object",
"required": false,
"description": "Can be used to add a hint to each checkbox item within the checkboxes component.",
"isComponent": true
},
{
"name": "divider",
"type": "string",
"required": false,
"description": "Divider text to separate checkbox items, for example the text `\"or\"`."
},
{
"name": "checked",
"type": "boolean",
"required": false,
"description": "Whether the checkbox should be checked when the page loads. Takes precedence over the top-level `values` option."
},
{
"name": "conditional",
"type": "object",
"required": false,
"description": "Provide additional content to reveal when the checkbox is checked.",
"params": [
{
"name": "html",
"type": "string",
"description": "The HTML to reveal when the checkbox is checked.",
"required": true
}
]
},
{
"name": "behaviour",
"type": "string",
"required": false,
"description": "If set to `\"exclusive\"`, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked."
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"description": "If `true`, checkbox will be disabled."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the checkbox input tag."
}
]
},
{
"name": "values",
"type": "array",
"required": false,
"description": "Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the `checked` option on each individual item."
},
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the checkboxes container."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the checkboxes container."
}
]