ayo/lion

Kristján Oddsson c7c83d1d8b

* update prettier to v3.x
* update prettify in @lion/nodejs-helpers to match updated prettier
* remove redundant await for promise
* remove `@types/prettier` as it's now included in `prettier`
* format lit template snippets with `jsx`

2024-05-17 21:43:23 +02:00

2.1 KiB

Raw Blame History

Input >> Use Cases ||20

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".

export const label = () => html` <lion-input label="Input" name="input"></lion-input> `;

Can be provided via the label-sr-only boolean attribute.

The label will be hidden, but still readable by screen readers.

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.

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

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.

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.

export const disabled = () => html`
  <lion-input disabled .modelValue=${'This is disabled'} label="Disabled"></lion-input>
`;

2.1 KiB Raw Blame History