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.

<Input ... type="text" value="john_doe">Username</Input>
<Input ... type="textarea" value="A passionate developer who loves coding.">About you</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: Removes the border for a more minimalistic and seamless appearance, blending with the surrounding design.

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>

Floating Labels

The floatingLabel prop allows the label to float inside the input field, giving a sleek, modern design. When enabled, the label starts inside the input and moves to the top when the user types.

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. 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", and "full", with "md" as the default. 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 animateSpeed 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. Adjusting this prop helps create a more dynamic or subtle user experience based on your design preferences.

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

The Input component provides several ways to customize its appearance, allowing you to match it with your design needs.

• 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>