Inline input

a borderless field that underlines on hover and focus, for editing a title in place.

Example

<span class="lucent-inline-input">
  <input class="lucent-inline-input__field typography-heading-md" placeholder="Untitled document" />
</span>

<lucent-inline-input
  placeholder="Untitled document"
  typography="typography-heading-md"
  [(ngModel)]="title"></lucent-inline-input>

Using it

Angular	lucent-inline-input import { LucentInlineInput } from '@design-foundry/lucent-angular';
Stylesheet	.lucent-inline-input @design-foundry/lucent-styles/core.css

API

Name	Kind	Type	Default	Description
typography	input	string	''	typography class for the field font.
placeholder	input	string	''	placeholder text.

Theming

Color (3)