Docs Menu

Checkboxes

Checkboxes have the following properties which are optional:

Property Required? Type Options Description
checked no bool
  • false (default)
  • true
 Is the checkbox checked by default?
id no string id value of the Checkbox component.
labelSide no string
  • right (default)
  • left
 Side of the checkbox the label is on.
name string Input name of the Checkbox (for fetching POST info).
type string
  • null (default)
  • warning
  • success
  • info
  • notice
 The color theme of the checkbox.
value string Default input value for the Checkbox.

Basic Examples
Basic Checkbox example. 

            
1<x-fcui-checkbox id="checkOne">Label Goes Here</x-fcui-checkbox>

Advanced Examples
Convert the button component into the <a href="#"> tag while maintaining button styling. 

            
1<x-fcui-checkbox id="checkTwo" labelSide="left" type="success">Example Label on the Left</x-fcui-checkbox>
Checkbox that's checked by default with a value of 'yes'. 
            
1<x-fcui-checkbox type="notice" id="checkThree" value="yes" :checked="true">Label Goes Here</x-fcui-checkbox>