Components Overview

Redot Dashboard ships a library of Blade components for building admin and website screens — form inputs, layout primitives, display widgets, and third-party integrations. This page covers how to use them and the conventions every component shares; each component has its own page for the details.

Using a component

Components are plain Blade tags. Pass props as attributes, and prefix any value that is a PHP expression with :.

<x-input name="title" :title="__('Title')" :value="$post?->title" validation="required" />

• Plain attributes pass a literal string: type="email".
• : attributes evaluate PHP: :value="$post->title", :title="__('Name')".
• Any extra HTML attribute you add (id, class, placeholder, disabled, readonly, wire:model, …) is forwarded to the underlying element, so you can treat a component like the input it wraps.

Shared form-field conventions

Most form inputs (<x-input>, <x-select>, <x-textarea>, <x-date-picker>, and friends) accept the same core attributes, so once you learn one you know them all:

• name — the field name submitted with the form.
• title — label text shown above the field (a localized string).
• value — the initial value, such as the model's current attribute.
• hint — small helper text shown beneath the field.
• validation — client-side validation rules (e.g. required, required|email). If the rules include required, the label shows a required marker. See RedotValidator.

After a failed validation redirect, form fields refill themselves from the submitted input, so you don't need to wrap value in old(). This works for array names too (tags[], title[en]).

To give a custom control the same label, hint, and required marker, wrap it in <x-field>.

Components that wrap a JavaScript widget (date pickers, selects, the rich editor, uploader, …) light up automatically through the asset & init system — you don't wire up any JS yourself.

Component index

Form inputs

• Input — <x-input>
• Textarea — <x-textarea>
• Select — <x-select>
• Select Remote — <x-select-remote>
• Checkboxes — <x-checkboxes>
• Radios / Radios Colored
• Toggle — <x-toggle>
• Date Picker — <x-date-picker>
• Color Picker — <x-color-picker>
• Icon Picker — <x-icon-picker>
• Rich Editor — <x-rich-editor>
• Rating — <x-rating>
• Uploader — <x-uploader>
• Attachments — <x-attachments>
• Translatable / Translatable Switcher
• Query Builder — <x-query-builder>
• Repeater / Repeater Card
• Captcha — <x-captcha>
• Field — <x-field>, the label + hint frame for custom controls
• Label, Hint, File Hint

Layout & structure

• Form — <x-form>
• Form Card — <x-form-card>
• Page Header, Page Loader
• Pagination
• Empty — empty-state placeholder
• Layouts — page shells (<x-layouts::dashboard>, …)

Display

• Alert — <x-alert>
• Apex Chart — <x-apex-chart>
• Avatar — <x-avatar>
• Status — flash-message alert
• Icon — <x-icon>
• Flag / Countries
• Logo, Favicon, Social Icon
• Toasts — renders flashed toast notifications

Integrations

• Facebook Pixel
• Google Analytics
• Captcha — Cloudflare Turnstile

Related

• Asset & Init System — how JS-backed components initialize.
• RedotValidator — the validation attribute.
• Layouts — the page shells components live inside.