BlatUI

Components

Field

Combine labels, controls, and help text to compose accessible form fields.

php artisan blatui:add field

This is your public display name.

<div class="w-full max-w-sm">
    <x-ui.field>
        <x-ui.field-label for="username">Username</x-ui.field-label>
        <x-ui.input id="username" type="text" placeholder="shadcn" />
        <x-ui.field-description>This is your public display name.</x-ui.field-description>
    </x-ui.field>
</div>

Field Group

We will respond within 24 hours.

<div class="w-full max-w-sm">
    <x-ui.field-group>
        <x-ui.field>
            <x-ui.field-label for="name">Name</x-ui.field-label>
            <x-ui.input id="name" type="text" placeholder="Evil Rabbit" />
        </x-ui.field>
        <x-ui.field>
            <x-ui.field-label for="message">Message</x-ui.field-label>
            <x-ui.textarea id="message" placeholder="Type your message here." />
            <x-ui.field-description>We will respond within 24 hours.</x-ui.field-description>
        </x-ui.field>
    </x-ui.field-group>
</div>

Field Set

Profile

Update your personal details.

<div class="w-full max-w-sm">
    <x-ui.field-set>
        <x-ui.field-legend>Profile</x-ui.field-legend>
        <x-ui.field-description>Update your personal details.</x-ui.field-description>
        <x-ui.field-group>
            <x-ui.field>
                <x-ui.field-label for="firstname">First name</x-ui.field-label>
                <x-ui.input id="firstname" type="text" placeholder="Evil" />
            </x-ui.field>
            <x-ui.field>
                <x-ui.field-label for="lastname">Last name</x-ui.field-label>
                <x-ui.input id="lastname" type="text" placeholder="Rabbit" />
            </x-ui.field>
        </x-ui.field-group>
    </x-ui.field-set>
</div>

Horizontal

Receive emails about your account activity.

<div class="w-full max-w-sm">
    <x-ui.field orientation="horizontal">
        <x-ui.field-content>
            <x-ui.field-label for="notifications">Email notifications</x-ui.field-label>
            <x-ui.field-description>Receive emails about your account activity.</x-ui.field-description>
        </x-ui.field-content>
        <x-ui.switch id="notifications" />
    </x-ui.field>
</div>