input

Form text input.

<div class="w-full max-w-sm space-y-2">
    <x-ui.label for="email">Email</x-ui.label>
    <x-ui.input id="email" type="email" placeholder="you@example.com" />
</div>

Installation

php artisan ui:add input

1. Install dependencies

composer: gehrisandro/tailwind-merge-laravel

2. Copy the source into resources/views/components/ui/

resources/views/components/ui/input.blade.php

@props([
    'type' => 'text',
])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20',
        $attributes->get('class'),
    );
@endphp

<input type="{{ $type }}"
    {{ $attributes->except('class')->merge(['class' => $classes]) }} />

Usage

<x-ui.input type="email" placeholder="you@example.com" />

Consumes theme tokens injected by `php artisan ui:init`.

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value.

@props([
    'type' => 'text',
])