Input

<x-input
    type="email"
    placeholder="Email"
/>

<x-input
    type="email"
    placeholder="Email"
/>

<div class="grid w-full max-w-sm items-center gap-1.5">
    <x-label htmlFor="picture">Picture</x-label>
    <x-input
        id="picture"
        type="file"
    />
</div>

<x-input
    disabled
    type="email"
    placeholder="Email"
/>

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

<div class="flex w-full max-w-sm items-center space-x-2">
    <x-input
        type="email"
        placeholder="Email"
    />
    <x-button type="submit">Subscribe</x-button>
</div>

<x-form class="w-2/3 [&_input]:max-w-full">
 
    <!-- shorthand -->
    <x-form.input
        name="username"
        label="Username (Shorthand)"
        placeholder="shadcn"
        description-trailing="This is your public display name."
    />
 
    <!-- longhand if you need more control-->
    <x-form.item>
        <x-form.label>Username (Longhand)</x-form.label>
        <x-input
            x-form:control
            name="username"
            placeholder="shadcn"
        />
        <x-form.description>
            This is your public display name.
        </x-form.description>
        <x-form.message name="username" />
    </x-form.item>
 
    <x-button type="submit">Submit</x-button>
</x-form>