Liquid GlassAPI Reference
Liquid GlassAPI Reference
createLiquidInput
Glass-wrapped text input component.
createLiquidInput
Creates a text input field wrapped in a glass effect.
Basic Usage
import { createLiquidInput } from '@avenra/liquid-glass';
const input = createLiquidInput('#input-container', {
placeholder: 'Enter your name...',
value: ''
});
input.on('input', (e) => console.log('Current text:', input.value));Props / Options
Extends LiquidGlassOptions plus:
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | '' | Input placeholder text |
value | string | '' | Initial value |
type | string | 'text' | HTML input type (text, password, email, etc.) |
Return Value — LiquidInputHandle
| Member | Type | Description |
|---|---|---|
element | Element | The wrapper container element |
value | string (get/set) | Current input value |
focus() | () => this | Focus the inner input element |
blur() | () => this | Blur the inner input element |
destroy() | () => void | Clean up the component |
on('input', cb) | Event | Fired on any input change |
on('change', cb) | Event | Fired when input loses focus after change |
on('focus', cb) | FocusEvent | Fired on focus |
on('blur', cb) | FocusEvent | Fired on blur |
on('destroy', cb) | undefined | Fired on destruction |