# Blesser UI Component Documentation
This document provides examples and usage guidelines for the UI components available in the Blesser library.
## Form Components
### Input
The `input` component is used for creating various types of text-based input fields.
```html
{{-- Basic usage --}}
{{-- With a specific type and initial value --}}
{{-- Required field --}}
{{-- With a placeholder --}}
{{-- Disabled field --}}
{{-- Readonly field --}}
{{-- Adding extra classes for styling --}}
{{-- Input with help text --}}
```
### textarea
```html
You can use this Blade component in any of your Blade views like this:
You can also pass values for the props you defined:
And you can add other HTML attributes directly, which will be merged thanks to `{{ $attributes->merge([...]) }}`:
```
### Select
You can now use this component in any of your Blade views like this:
**Example 1: Basic usage**
````html
````
**Example 2: With a placeholder and different ID**
````html
````
**Example 3: Passing additional HTML attributes**
````html
@php
$productOptions = [
'laptop' => 'لپ تاپ',
'mouse' => 'موس',
'keyboard' => 'کیبورد'
];
@endphp
````
Remember to adjust the `name` attribute as needed for your form handling logic.
### rate
```html
{{-- Basic usage with 5 stars --}}
{{-- With a pre-selected value (e.g., 3 stars) --}}
{{-- With a different number of stars (e.g., 7 stars) --}}
{{-- With a pre-selected value and custom attributes --}}
```