11bbc5fff5
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter * fix: fixed frontmatter metadate for api-table MDs * fix: fixed frontmatter eslint issue
90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
---
|
|
parts:
|
|
- Input
|
|
- Use Cases
|
|
title: 'Input: Use Cases'
|
|
eleventyNavigation:
|
|
key: 'Input: Use Cases'
|
|
order: 20
|
|
parent: Input
|
|
title: Use Cases
|
|
---
|
|
|
|
# Input: Use Cases
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import '@lion/ui/define/lion-input.js';
|
|
```
|
|
|
|
## Label
|
|
|
|
Can be provided via the `label` attribute or via the `slot="label"`.
|
|
|
|
```js preview-story
|
|
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
|
|
|
|
A helper text shown below the label to give extra clarification.
|
|
|
|
Just like the `label`, a `help-text` can be provided via the `help-text` attribute, a slot can be used to change the `html` and `CSS` of the help-text.
|
|
For example add an anchor with further explanation.
|
|
|
|
```js preview-story
|
|
export const helpText = () => html`
|
|
<lion-input>
|
|
<label slot="label">Label</label>
|
|
<div slot="help-text">
|
|
Help text using <a href="https://example.com/" target="_blank">html</a>
|
|
</div>
|
|
</lion-input>
|
|
`;
|
|
```
|
|
|
|
## Prefilled
|
|
|
|
```js preview-story
|
|
export const prefilled = () => html`
|
|
<lion-input .modelValue="${'Prefilled value'}" label="Prefilled"></lion-input>
|
|
`;
|
|
```
|
|
|
|
## Read only
|
|
|
|
`readonly` attribute will be delegated to the native `<input>` to make it read-only.
|
|
|
|
This field **will still be included** in the parent fieldset or form's `serializedValue`.
|
|
|
|
```js preview-story
|
|
export const readOnly = () => html`
|
|
<lion-input readonly .modelValue="${'This is read only'}" label="Read only"></lion-input>
|
|
`;
|
|
```
|
|
|
|
## Disabled
|
|
|
|
`disabled` attribute will be delegated to the native `<input>` to make it disabled.
|
|
|
|
This field **will not be included** in the parent fieldset or form's `serializedValue`.
|
|
|
|
```js preview-story
|
|
export const disabled = () => html`
|
|
<lion-input disabled .modelValue="${'This is disabled'}" label="Disabled"></lion-input>
|
|
`;
|
|
```
|