Input

Here's a basic example of the Input component in action:

<script>
  import { Input } from "theui-svelte";
</script>

<Input placeholder="Type your full name">Name</Input>

The Input component supports various input types, making it a flexible solution for different use cases. Whether you need a standard text field, a password input, or a date picker, this component adapts to your needs. To specify the type of input, use the type prop. Here's an example:

<Input type="text" name="username" placeholder="Enter your username">Username</Input>
<Input type="email" name="email" placeholder="Enter your email">Email</Input>
<Input type="password" name="password" placeholder="Enter your password">Password</Input>
<Input type="date" name="dob">Date of birth</Input>
<Input type="url" name="url" placeholder="Enter your profile URL">URL</Input>
<Input type="number" name="days" placeholder="Enter numbers">Number of days</Input>

When the type prop is set to "textarea", the Input component renders a <textarea> instead of a standard input field. By default, the textarea has 3 rows, but you can customize it using the rows attribute.

<Input ... type="textarea">Your message</Input>

The value prop allows you to set a default value for the input field or textarea. This is useful when you want the input to start with a predefined value, such as prefilled user data, placeholders for editing forms, or default selections.

The value prop work for all the input types including textarea. It is bindable, so use bind:value to read what the user types.

<Input ... type="text" value="john_doe">Username</Input>
<Input ... type="textarea" value="A passionate developer who loves coding.">About you</Input>

<!-- Two-way binding -->
<script>
  let username = $state("john_doe");
</script>
<Input ... bind:value={username}>Username</Input>

The variant prop allows you to control the visual style of the input field. There are two available variants:

• bordered(default): Displays the input with a visible border, making it distinct and clearly separated from the background.
• flat: drops the border and keeps only the bottom rule.

This prop helps you match the input style with your overall UI theme.

<Input ... variant="bordered">Username</Input>
<Input ... variant="flat">Email</Input>

Adding a Label

To add a label, simply place text or elements inside the Input component. This can be a simple text label or a combination of icons, tooltips, or other elements. By default, the label appears above the input field.

<!-- Simple text label -->
<Input name="username">Username</Input>

<!-- Label with multiple items -->
<Input name="password" type="password">
  🔒 Password
  <HelperText>Password must be 10 characters long</HelperText>
</Input>

Helper Text

Use the helperText prop to show extra information below the input, like a hint or a format requirement. It accepts a string or a snippet. The helper text is linked to the input with aria-describedby, so screen readers read it along with the label. A string renders as plain text, so use the snippet for markup.

<!-- String -->
<Input name="password" type="password" helperText="Password must be 10 characters long">Password</Input>

<!-- Snippet -->
<Input name="password" type="password">
  Password
  {#snippet helperText()}
    Must be <b>10 characters</b> long
  {/snippet}
</Input>

Floating Labels

With floatingLabel the label starts inside the field and moves up to the top edge once the field has focus or content.

The floating label works with both the "bordered" and "flat" input variants. However, it is enabled by default when the variant is set to "flat", unless explicitly disabled (this also applies to a flat Input inside a bordered Form or Fieldset). For the "bordered" variant, you must enable it manually by adding the floatingLabel prop.

<Input ... variant="bordered" floatingLabel>Name</Input>
<Input ... variant="flat" floatingLabel>Name</Input>

The size prop controls the input field's size and supports "sm", "md", "lg", and "xl". The default is "md". Adjusting this prop allows you to customize the input's appearance to fit different design needs.

<Input ... size="sm">Small</Input>
<Input ... size="md">Medium (Default)</Input>
<Input ... size="lg">Large</Input>
<Input ... size="xl">Extra Large</Input>

The rounded prop controls the roundness of the input's corners, allowing for different visual styles. Available values are "none", "sm", "md", "lg", "xl", "2xl", and "full", with "md" as the default. The "flat" variant has no rounded corners. Use this prop to adjust the input's appearance, from sharp edges to fully rounded corners, depending on your design needs.

<Input ... rounded="none">Rounded none</Input>
<Input ... rounded="sm">Rounded small</Input>
<Input ... rounded="md">Rounded medium</Input>
<Input ... rounded="lg">Rounded large</Input>
<Input ... rounded="xl">Rounded extra large</Input>
<Input ... rounded="full">Rounded full</Input>

The animationSpeed prop controls the speed of input animations, allowing for smooth transitions and interactions. Available values are "none", "slower", "slow", "normal", "fast", and "faster", with "normal" as the default.

<Input ... animationSpeed="slower">Animation slower</Input>
<Input ... animationSpeed="slow">Animation slow</Input>
<Input ... animationSpeed="normal">Animation normal</Input>
<Input ... animationSpeed="fast">Animation fast</Input>
<Input ... animationSpeed="faster">Animation faster</Input>
<Input ... animationSpeed="none">Animation none</Input>

These props cover the different parts of the field:

• wrapperClasses: Applied to the outermost wrapper <div>, allowing full control over the container's styling.
• labelClasses: Applied directly to the label, making it easy to adjust typography, spacing, or colors.
• class attribute: This is the standard HTML class attribute applied to the input element itself, giving you direct control over its styling.

By combining these options, you can fully customize the input's layout and appearance while keeping its functionality intact.

<Input
  name="myInput"
  placeholder="Enter username"
  wrapperClasses="flex-row items-center gap-16"
  labelClasses="text-xl text-blue-500"
  class="text-blue-500 focus:ring-blue-500 focus:border-blue-500"
>USERNAME</Input>

Set the reset prop to true to remove the default styles of the input and its label, so only your own classes apply. This is useful when the input must follow a completely different design. The default is false.

<Input name="myInput" reset={true} class="w-full border-2 border-dashed border-gray-400 p-2" wrapperClasses="flex flex-col gap-1">
  Custom input
</Input>