Plume UI

Forms

A collection of form components for user input.

Examples

User Information

Please fill out the form below.

We'll never share your email.

Notifications

These are the types of notifications you can receive.

Standalone Checkboxes

Toggle Switch

Push Notifications

Color Picker

Number Input

Date & Time Inputs

or drag and drop

PNG, JPG, GIF up to 10MB

Range Slider

Inline Form

Properties

Form

Prop Type Default Description
action string '' Form submission URL.
method string POST HTTP method.
formData string null AlpineJS function name for form state.

Shared Input Props

Most input components (Input, Select, Textarea, etc.) share these properties.

Prop Type Default Description
label string null Required (or slot). The field label.
model string null AlpineJS model name for two-way binding.
placeholder string '' Input placeholder text.
icon string null Icon class name.

Usage

Input with Icon and Help Text

blade 
<x-plume::form.input 
    label="Email" 
    model="email" 
    type="email" 
    icon="icon-[fluent--mail-24-regular]"
>
    <x-slot:after>
        <p class="text-xs text-foreground/50">We'll never share your email.</p>
    </x-slot:after>
</x-plume::form.input>

Form Section

blade 
<x-plume::form.section title="Profile" description="Update your info.">
    <x-plume::form.input label="Name" model="name" />
</x-plume::form.section>