Input

Types

Loading...

States

Loading...

Sizes

Loading...

Input: a styled text input with label, help text, and error states.

• Tag: <flint-input>
• Class: FlintInput

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintInput } from 'flint-ui';

Usage

<flint-input></flint-input>

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Label text displayed above the input.
value	value	string	''	Current input value.
type	type	string	'text'	HTML input type (text, email, password, etc.).
placeholder	placeholder	string	''	Placeholder text shown when the input is empty.
helpText	help-text	string	''	Help text displayed below the input.
error	error	boolean	false	Whether the input is in an error state.
errorMessage	error-message	string	''	Error message displayed below the input.
disabled	disabled	boolean	false	Disables the input and prevents interaction.
required	required	boolean	false	Marks the input as required for form validation.
readonly	readonly	boolean	false	Makes the input read-only.
name	name	string	''	Form field name used when submitting form data.
autocomplete	autocomplete	string	''	Browser autocomplete hint.
size	size	'sm' | 'default' | 'lg'	'default'	'sm' | 'default' | 'lg'

Events

Event	Detail	Description
flint-input-input	—	Fired on each keystroke as the value changes.
flint-input-change	—	Fired when the input loses focus after the value has changed.

CSS Custom Properties

Property	Default
--flint-input-border-radius	—
--flint-input-border-color	—
--flint-input-bg	—
--flint-input-placeholder-color	—
--flint-input-border-hover-color	—
--flint-input-disabled-bg	—
--flint-input-disabled-color	—
--flint-input-readonly-bg	—
--flint-font-family	—
--flint-label-color	—
--flint-text-color	—
--flint-primary-color	—
--flint-primary-focus-ring	—
--flint-error-color	—
--flint-error-focus-ring	—
--flint-help-text-color	—

Methods

Method	Description
inputElement(): HTMLInputElement	Expose the internal <input> for direct access

---