Input

Displays a form input field or a component that looks like an input field.

Examples

Default

<c-input type="email" placeholder="Email" input-classes="w-80"></c-input>

File

Picture 
<div class="grid w-full max-w-sm items-center gap-1.5">
  <c-label label-for="picture">Picture</c-label>
  <c-input
    id="picture"
    type="file"
    input-classes="file:border-0 file:bg-transparent file:text-sm file:font-medium"
  ></c-input>
</div>

Disabled

<c-input
  disabled
  type="email"
  placeholder="Email"
  input-classes="w-80"
></c-input>

With Label

Email 
<div class="grid w-full max-w-sm items-center gap-1.5">
  <c-label label-for="email">Email</c-label>
  <c-input id="email" type="email" placeholder="Email"></c-input>
</div>

With Button

Subscribe 
<div class="flex w-full max-w-sm items-center gap-1.5">
  <c-input type="email" placeholder="Email"></c-input>
  <c-button type="submit" variant="outline">Subscribe</c-button>
</div>

With Text

Email

Enter your email address.

<div class="grid w-full max-w-sm items-center gap-1.5">
  <c-label label-for="email-2">Email</c-label>
  <c-input id="email-2" type="email" placeholder="Email"></c-input>
  <p class="text-[0.8rem] text-muted-foreground">Enter your email address.</p>
</div>

API Reference

Input

The Input component is a styled input field that supports all standard HTML input attributes.

Prop Type Default Description
type string 'text' Type of the component
value string '' Value of the component
placeholder string '' -
disabled boolean false Whether the component is disabled
required boolean false -
readonly boolean false -
input-classes string - Additional CSS classes for the element
aria-label string - -
aria-describedby string - -
aria-invalid string - -

Events

The Input component dispatches a valuechange custom event when the input value changes.

// Listen for value changes
inputElement.addEventListener('valuechange', (event) => {
  console.log('New value:', event.detail.value);
});