A component for text-like inputs. Accessible and versatile.
You can install the component using NPM or Yarn.
npm install @tournant/input --save
If you use Yarn:
yarn add @tournant/input
Once the component is installed you need to import wherever you want to use it.
Don’t forget to add it to the registered components (been there, done that):
components:TournantInput// ... all the other amazing components
This is just a quick overview. For an in-depth guide how to use the component check the section Usage below.
value: The value shown inside of the input.
label: The label text of the input. Required.
validation: A vuelidate-like object, must contain properties named
description: Descriptive text giving a user more context on what form their input has to have. Optional.
descriptionPosition: Controls if the position should be displayed underneath the input or between label and input; defaults to
isTextarea: Render a textarea instead of an input element. Default to
The component exposes the following CSS classes for its parts:
|t-ui-input__feedback||Container to show feedback messages|
By default no styles will be attached to these classes.
This component was built to accept all text-like input formats. These are, for example,
Attributes you add when adding the component to your template are bound to the input element.
Say you want to add a password input to a form. If you add
type="password" the component will take the type and apply it to the input element.
@tournant/input is v-model compliant.
Ths will result in the following input:
💁 Note: You do not need to pass in a
id. A unique ID for every instance of the component is automatically generated.
<textarea>s are quite similar, in that they can both hold text content, which might need validation and so forth. This is why, instead of having a separate component to add a
<textarea>, you can change this one via the
isTextarea prop to be one:
Input elements must have a linked label to give the input an accessible name.
To do so, pass in the
label prop when using the component.
label is required.
Sometimes it is useful to describe expected conditions. For example, a user has to enter a password that is at least eight characters long.
To add a description, pass in the prop named, you might have guessed it,
This will render the description in a
p element which is linked to the
input via the
In addition to binding the
required attribute on the input element the component exposes a slot inside of its
label element to add a visual clue that the user has to fill in data.
Bear in mind that the popular * might not be enough to indicate a required field. For further reading I recommend the article Required Fields on a11y-101.com
💁 Note: This example uses the named slot syntax introduced in Vue 2.6. Take a look in the docs for usage examples and how to use named slots in versions prior to 2.6.
💁 Note: You can add any text you want. If you mark optional fields instead of required ones, this is also possible.
No input without validation, right?
You will have to take care of this yourself, though. The component can and should not know what value is expected inside of it.
Nonetheless, we tried to make it as easy as possible to use the component along existing solutions like Vuelidate.
In fact, if you are already using Vuelidate, you are good to go.
@tournant/input expects a vuelidate-like validation object. Namely the properties
For our password example the Vuelidate config might look something like this:
// […] Component context omitted for brevityvalidations:password:requiredminLength:
You can use
$v.password as the prop for the input component without the need to change anything.
aria-invalid is set based on
validation.$error, to let screen readers know if the entered value is correct.
This attribute could also be used to add styles based on the validated state.
Relying on styling is not enough to convey errors to users.
@tournant/input exposes a
feedback slot to render detailed feedback for the users.
requiredYour password is required.
true the ID of the feedback container will be added to
aria-describedby and as thus read by screen readers.
Bugs & Enhancements
If you found a bug, please create a bug ticket.
For enhancements please refer to the contributing guidelines.