Textfield
A minimal single-line text input with a border.
Examples
Usage
<zakuni-textfield></zakuni-textfield>Read the value from the inner input element inside the shadow root. The border colour and font size are inherited from the parent.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('zakuni-textfield')
export class ZakuniTextfield extends LitElement {
static styles = css`
input {
padding: 0.5rem;
border: 1px solid;
border-radius: 0.25rem;
}
`;
render() {
return html`
<input><slot /></input>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-textfield": ZakuniTextfield;
}
}