Sha256: ce264515b1d43b9d1f0d0acf10a30e5b7c35ab1cbe9e621361cd2c8b9224d63a
Contents?: true
Size: 1.64 KB
Versions: 10
Compression:
Stored size: 1.64 KB
Contents
name: Form input
description: A form input field and an associated label.
body: |
[Forked from GOV.UK Frontend](https://govuk-frontend-review.herokuapp.com/components/input)
accessibility_criteria: |
Inputs in the component must:
* accept focus
* be focusable with a keyboard
* be usable with a keyboard
* be usable with touch
* indicate when they have focus
* be recognisable as form input elements
* have correctly associated labels
* be of the appropriate type for their use, e.g. password inputs should be of type 'password'
Labels use the [label component](/component-guide/label).
examples:
default:
data:
label:
text: "What is your name?"
name: "name"
specific_input_type:
description: By default the input will be type="text". This parameter accepts an alternative, e.g. "search" or "email". No validation is done on this input.
data:
label:
text: "What is your email address?"
name: "address"
type: "email"
aria_described_by:
description: |
Allows the addition of an aria-describedby attribute. Note that this will be overridden in the event of an error, where the error will be used for the describedby attribute value.
The example below uses the ID of the skiplink container for demonstration purposes, in real use this would be passed the ID of an element that correctly described the input.
data:
label:
text: "This might not work"
name: "labelledby"
labelledby: "skiplink-container"
with_error:
data:
label:
text: "What is your name?"
name: "name"
error_message: "Please could you provide your name"
Version data entries
10 entries across 10 versions & 1 rubygems