Getting Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Banner
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Command
- Collapsible
- Combobox
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Editor
- Input
- Input Group
- Label
- Loading Spinner
- Native Select
- Popover
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Steps
- Switch
- Tabs
- Textarea
- Tooltip
Patterns
Checkbox
Displays a native checkbox with April UI styling.
Component Code
<div class="flex items-center gap-2"> <april:checkbox id="terms" name="terms" /> <april:label for="terms">Accept terms and conditions</april:label></div>
Component Code
<div class="flex items-center gap-2"> <april:checkbox id="terms" name="terms" /> <april:label for="terms">Accept terms and conditions</april:label></div>
The checkbox is a styled input. Use a label with a matching
for and
id so the complete control remains easy to use with a pointer or keyboard.
<april:checkbox id="updates" name="updates" value="1" /><april:label for="updates">Send me product updates</april:label>
<april:checkbox id="updates" name="updates" value="1" /><april:label for="updates">Send me product updates</april:label>
All native input attributes, including
checked,
disabled,
required, and
value, are passed through.
Publishing Views
Use the following command to publish this view:
php artisan april:publish checkbox
php artisan april:publish checkbox
php artisan april:publish --all
php artisan april:publish --all