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

chore: improve [slot=label] example

Browse source
This commit is contained in:
Thijs Louisse 2025-07-26 12:38:14 +02:00
parent 226f0cf003
commit e10a0ec93c
1 changed files with 3 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
docs/fundamentals/systems/form/styling.md
View file

@ -21,30 +21,13 @@ import '@lion/ui/define/lion-button.js';
## Label
Can be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
For example add an `u-sr-only` class to the label to make it (partially) visually hidden.
A label is always needed for accessibility reasons.
Can be provided via the `label` attribute, but the slot can be used to change the html and css of the label.
A label is always needed to provide an accessible user experience.
```js preview-story
export const label = () => html`
<style>
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
border: 0;
margin: 0;
padding: 0;
}
</style>
<lion-input>
<label slot="label"
>Label <span class="u-sr-only">partially only visible for screen-readers</span></label
>
<label slot="label"> Label with <b>html tag</b> inside </label>
</lion-input>
`;
```