ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/docs/components/input/overview.md
Pavlik Kiselev 11bbc5fff5
feat: migrated the navigation metadata from inline MD title decorations to frontmatter 
* 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
2025-03-19 10:08:22 +01:00

1.5 KiB
Raw Blame History

parts title eleventyNavigation
Input
Overview
Input: Overview
key order parent title
Input: Overview 10 Input Overview

Input: Overview

import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-input.js';

A web component that enhances the functionality of the native <input> element.

export const main = () => html`<lion-input label="First Name"></lion-input>`;

Features

  • Extra visual elements can be added via slots:
    • label: can also 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 visually hidden. A label is always needed for accessibility reasons.
    • help-text: a helper text shown below the label to give extra clarification.
    • prefix: does not have an active use case yet, but the option is in place.
    • suffix: can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.
    • before: does not have an active use case yet, but the option is in place.
    • after: can be used to show a currency or percentage.
  • Delegates attributes like type, disabled, placeholder and readonly to the native input.
  • Can make use of validation.

Installation

npm i --save @lion/ui

import '@lion/ui/define/lion-input.js';