The TextField component is a flexible, accessible text input for forms, search bars, or any place you need typed input.

• Variants: Multiple visual styles (outlined, filled, etc.).
• Sizes: Configurable for compact or large input fields.
• Labels: Supports descriptive labels for accessibility.
• Full reactivity: Bind values and react to changes in real-time.

Usage Example

Preview

contained (sm)

contained (sm)

outlined (md)

outlined (md)

text (lg)

text (lg)

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { TextField } from "@fefade-ui/svelte"
</script>

<div style="max-width: 300px; margin: 0 auto;">
  {#each Constants.variants as variant, i (i)}
    {@const size = Constants.sizes[i + 1]}
    <TextField label={`${variant} (${size})`} {variant} {size} />
    <br />
    <br />
  {/each}
</div>

Props

| Prop | Type | Default | Description | | ------------- | --------- | ----------- | -------------------------------------------------- | ------------------------------- | ------ | -------------------------------- | | label | string | — | Text label displayed above or inside the input. | | variant | "filled" | "outlined" | "filled" | Visual style of the text field. | | size | "sm" | "md" | "lg" | "xl" | "md" | Controls the input’s dimensions. | | value | string | "" | The current input value; supports two-way binding. | | disabled | boolean | false | Disables the input when true. | | placeholder | string | — | Placeholder text inside the input. |

Notes

• Works with form validation and accessibility features.
• Supports reactive bindings for state management.
• Can be combined with icons, helper text, and adornments for enhanced UX.