---
title: Markdown-components
slug: mihai/markdown-components
docTags: 
createdAt: 2026-02-10T16:58:12.259Z
---

## Component Usage

***

### Current Component List

:::BlockQuote
Note: Most laravel functions should work in the current component
:::

:::BlockQuote
*As an example*
:::

:::BlockQuote
`@cannot('admin-company-profile') disabled @endcannot`would work as
:::

:::BlockQuote
`<x-forms.inputs.textbox name="myComponent" placeholder="This is my placeholder" @cannot('admin-company-profile') disabled @endcannot />`
:::

This would apply to @cannot ability to the control.

| Component               | Component Tag                 |
| ----------------------- | ----------------------------- |
| [Textbox](./#textbox)   | `<x-forms.inputs.textbox />`  |
| [Textarea](docId:)      | `<x-forms.inputs.textarea />` |
| [Button](docId:)        | `<x-forms.inputs.button />`   |
| [Checkbox](./#checkbox) | `<x-forms.inputs.checkbox />` |

| Syntax    | Description | Test Text   |
| --------- | ----------- | ----------- |
| Header    | Title       | Here's this |
| Paragraph | Text        | And more    |

### &#x20; Textbox

Full Example:

`<x-forms.inputs.textbox type="email" id="texbox-id" name="textbox-name" placeholder="{{ __('Enter email address') }}" value="This is a placerholder" disabled ariaLabel="inputGroup-sizing-sm" ariaDescribe="Aria description" prependText="@" appendText="End Text" tabindex="2" cannot="admin-company-profile" />`

Available Options:

Optional:

- `id`: `id` of the input
- `name`: `name` of the input
- `type`: `type` of the input, i.e. `text, email, phone` *default*: `text`
- `value`: `value` of the input by default, can be used for holding old input on fail.
- Example with old input: `value="{{ old('organization_name', $companyProfile['organization_name']) }}"`
- `placeholder`: Placeholder text
- `disabled`: Just needs `disabled` flag added like a normal HTML input.
- `ariaLabel`: `aria-label` for the HTML element.
- `ariaDescribe`: `aria-described-by` for the HTML element.
- `prependText`: Sets the prepended text of a text field, setting it would add the prepend section.
- `appendText`: Sets the appended text of a text field, setting it would add the appended section.
- `tabindex`: Sets the `tabindex` of the element.
- `cannot`: Sets the gate for the `@cannot` of the element. `i.e. cannot="admin-company-profile"`

`<x-forms.inputs.textarea disabled readonly aria-label="test" data-test="data-test-yo" class="form-control description" id="organization-message" name="organization_message" rows="3" maxlength="250" minlength="3" tabindex="3" placeholder="test" style="resize: none;"> {{ old('organization_message', $companyProfile['organization_message']) }} </x-forms.inputs.textarea>`

Available Options:
Uses all standard options of HTML elements.

Optional:

- `id`: `id` of the input
- `name`: `name` of the input
- `value`: `value` of the input by default, can be used for holding old input on fail.
  - Example with old input: `value="{{ old('organization_name', $companyProfile['organization_name']) }}"`
- `placeholder`: Placeholder text.
- `disabled`: Just needs `disabled` flag added like a normal HTML input.
- `readonly`: Just needs `readonly` flag added like a normal HTML input.
- `cols`: Normal HTML cols attribute: *default*: `20`
- `rows`: Normal HTML rows attribute: *default*: `3`
- `noResize`: Disabled resizing of the textarea.
- `tabindex`: Sets the `tabindex` of the element.
- `cannot`: Sets the gate for the `@cannot` of the element. `i.e. cannot="admin-company-profile"`
- `maxlength`: Maximum allowed length of text.
- `minlength`: Minimum allowed length of text.
- yooo
- ooo
- ooo
- hmm
-

Available Options:

Optional:

- `id`: `id` of the input
- `disabled`: Just needs `disabled` flag added like a normal HTML input.
- `tabindex`: Sets the `tabindex` of the element.
- `icon`: The icon you intend to use, in cases of font awesome. `i.e. fa fa-user` would be what is expected.
- `iconPack`: The icon pack you wish to use with font awesome. i.e.`far, fas, fab`
- `link`: The link flag flips buttons to ` a href` type buttons, pass the link as normal: `link="http://www.google.com`

### &#x20; Checkbox

Full Example:

Available Options:

Optional:

- `image`: Adds an image before the label.
- `imageHeight`: Adds an height to the image before the label.
- `imageWidth`: Adds an width to the image before the label.
- `label`: Text for the label of the checkbox.