ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add eg for label-sr-only attribute on input element

Browse source
This commit is contained in:
Konstantinos Norgias 2022-04-04 16:39:37 +02:00
parent 75065f477e
commit a790586b8b
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
docs/components/input/use-cases.md
View file

@ -13,6 +13,19 @@ Can be provided via the `label` attribute or via the `slot="label"`.
export const label = () => html` <lion-input label="Input" name="input"></lion-input> `; export const label = () => html` <lion-input label="Input" name="input"></lion-input> `;
``` ```
## Label sr-only (a11y)
Can be provided via the `label-sr-only` boolean attribute.
The label will be hidden, but still readable by screen readers.
```js preview-story
export const labelSrOnly = () =>
html` <lion-input label-sr-only label="Input" name="input"></lion-input> `;
```
> Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`
## Help-text ## Help-text
A helper text shown below the label to give extra clarification. A helper text shown below the label to give extra clarification.