> For the complete documentation index, see [llms.txt](https://crudstarter.gitbook.io/crudstarter-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://crudstarter.gitbook.io/crudstarter-docs/components.md). # Components This package uses laravel anonymous components to leverage the power of laravel and promote code re-usability. ## Form Components ### Input component example: ```html ```

Prop Name	Default Value	Required	Description
`name`	none	Yes	The name of the input field, used for form submission and validation.
`id`	Value of `$name` prop	No	The ID of the input field.
`label`	'Label'	No	The label text for the input field.
`class`	empty	No	Additional CSS classes to apply to the input field.
`value`	empty	No	The initial value of the input field.
`type`	'text'	No	The type of the input field (e.g., `text`, `email`, `password`).
`message`	empty	No	The validation error message to display if there's an error.
`col`	12	No	The Bootstrap column width for the input field.
`req`	`false`	No	A boolean indicating whether the field is required or not. If `true`, an asterisk (*) will be added next to the label.
`labelDisplay`	`true`	No	A boolean indicating whether to display the label or not.
`tooltip`	`false`	No	A boolean indicating whether to display a tooltip or not.
`tooltip_text`	'Tooltip on top'	No	The text to display in the tooltip.

### Button component example: ```html Save ```

Prop Name	Default Value	Required	Description
(Slot Content)	-	Yes	The content to be displayed inside the button element.
`id`	'id'	No	The ID of the button element.
`class`	empty	No	Additional CSS classes to apply to the button element.
`type`	'submit'	No	The type of the button (e.g., 'submit', 'button', 'reset').

### Textarea component example: ```html ```

Prop Name	Default Value	Required	Description
`name`	-	Yes	The name of the textarea field, used for form submission and validation.
`id`	Value of `$name` prop	No	The ID of the textarea field.
`label`	'Label'	No	The label text for the textarea field.
`class`	empty	No	Additional CSS classes to apply to the textarea field.
`value`	empty	No	The initial value of the textarea field.
`message`	empty	No	The validation error message to display if there's an error.
`col`	12	No	The Bootstrap column width for the textarea field.
`req`	`false`	No	A boolean indicating whether the field is required or not. If `true`, an asterisk (*) will be added next to the label.

### Checkbox example: ```html ```

Prop Name	Default Value	Required	Description
`name`	-	Yes	The name of the checkbox field, used for form submission and validation.
`id`	Value of `$name` prop	No	The ID of the checkbox field.
`label`	'CheckBox'	No	The label text for the checkbox field.
`class`	empty	No	Additional CSS classes to apply to the checkbox field.
`value`	1	No	The value of the checkbox field when checked.
`message`	empty	No	The validation error message to display if there's an error.
`isChecked`	empty	No	A boolean or string value indicating whether the checkbox should be checked or not.
`isEditMode`	empty	No	A boolean or string value indicating whether the checkbox is in edit mode or not.
`col`	12	No	The Bootstrap column width for the checkbox field.

### Row Component example: ```html

```

Prop Name	Default Value	Required	Description
(Slot Content)	-	Yes	The content to be displayed inside the div element.
(`$attributes`)	-	No	Additional HTML attributes to apply to the div element.

### Select Component example: ```html ```

Prop Name	Default Value	Required	Description
`name`	-	Yes	The name of the select field, used for form submission and validation.
`id`	Value of `$name` prop	No	The ID of the select field.
`label`	'Select'	No	The label text for the select field.
`class`	'form-control'	No	Additional CSS classes to apply to the select field.
`value`	empty	No	The initial value of the select field (not used in this component).
`message`	empty	No	The validation error message to display if there's an error.
`col`	12	No	The Bootstrap column width for the select field.
`req`	`false`	No	A boolean indicating whether the field is required or not. If `true`, an asterisk (*) will be added next to the label.
`labelDisplay`	`true`	No	A boolean indicating whether to display the label or not.
`optionDisplay`	`true`	No	A boolean indicating whether to display a default "Select {label}" option or not.
`model`	`null`	No	The model value to be selected in the options.
`_key`	`null`	No	A key value used for selecting the default option when no model is provided.
`options`	-	Yes	An array of key-value pairs representing the options to be displayed in the select field.
(Slot Content)	-	No	Additional content to be displayed inside the select element.

### Enum Select

Prop Name	Default Value	Required	Description
`name`	-	Yes	The name of the select field, used for form submission and validation.
`id`	Value of `$name` prop	No	The ID of the select field.
`label`	'Select'	No	The label text for the select field.
`class`	'form-control text-14'	No	Additional CSS classes to apply to the select field.
`value`	empty	No	The initial value of the select field (not used in this component).
`message`	empty	No	The validation error message to display if there's an error.
`col`	12	No	The Bootstrap column width for the select field.
`req`	`false`	No	A boolean indicating whether the field is required or not. If `true`, an asterisk (*) will be added next to the label.
`model`	`null`	No	The model value to be selected in the options.
`optionDisplay`	`true`	No	A boolean indicating whether to display a default "Select {label}" option or not.
`labelDisplay`	`true`	No	A boolean indicating whether to display the label or not.
`options`	-	Yes	An array of objects representing the options to be displayed in the select field, where each object has a `value` and a `name` property.

## Sidebar Components ### Single-Level Sidebar Component To create a sidebar item for your Dashboard: Use this code: ```html ``` This code does the following: * Sets the route to 'home' * Displays "Dashboard" as the name * Uses '/home' as the URL ### Multi-Level Sidebar To create a sidebar item with multiple subitems: Use this structure: ```html

``` This code does the following: * Creates a main sidebar item called "Reports" with a report icon * Specifies two routes that will be part of this multihead item * Adds two subitems: "Package Filter" and "Package Report" * Each subitem has its own route, name, and URI