Input Field

The Input Field component is an enhanced wrapper for the native HTML <input> element. It provides built-in functionality for real-time character filtering.

Props

Prop	Type	Default	Description
`value`	`string`	`''`	The input's bound value.
`type`	`'text' \| 'password' \| 'textarea'`	`'text'`	The type of the input field.
`characterFilter`	`string[]`	`undefined`	Array of allowed characters. If set, other characters are rejected.
`class`	`string`	`''`	CSS classes to apply to the input.
`overrideDefaultStyling`	`boolean`	`false`	If true, removes the base fluid-input-field class.
`...rest`	`HTMLInputAttributes`	`—`	Standard HTML <input> attributes.

Samples

Basic Text

Standard text input with reactive binding.

Value:

<InputField

  placeholder="Enter your name"

  bind:value={textValue}

  class="w-full"

/>

Password

Secure entry for passwords and sensitive data.

Value:

<InputField

  type="password"

  placeholder="Enter password"

  bind:value={passwordValue}

  class="w-full"

/>

Textarea

Multiline text input for longer messages.

Value:

<InputField

  type="textarea"

  placeholder="Enter your message..."

  bind:value={textAreaValue}

  class="w-full h-32"

/>

Numeric Only

Using characterFilter to restrict input to digits.

Value:

<InputField

  placeholder="Numbers only..."

  bind:value={numericValue}

  characterFilter={['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']}

  class="w-full"

/>

Error State

Applying custom error styling for validation feedback.

Value: invalid-email@

<InputField

  class="w-full fluid-input-field-error"

  placeholder="Error styling"

  bind:value={errorValue}

/>