> For the complete documentation index, see [llms.txt](https://queents.gitbook.io/vilt/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://queents.gitbook.io/vilt/components/using.md).

# Using

we are using components on every resource we build to manage the form builder, and we have a lot of methods and types for these components

### Components Methods

all the components accept some methods like

```php
->label(string), 
->placeholder(string), 
->hint(string), 
->tab(string),
->default(static),
->type(string), // Like password, color ..
->validation(array), // ["created"=> "", "update"=> ""]
->searchable(bool), 
->sortable(bool), 
->over(bool),
->required(bool), 
->disabled(bool),
->unique(bool)
->list(bool)
->create(bool)
->edit(bool)
->col(int)
```

### Validation

you can validate your row on create/update by using this method on array 

```php
->validation([
    "create" => "required|string|max:255",
    "update" => "required|string|max:255"
  ]),
```

and if you like to make a row unique just use this method 

```php
->unique()
```

to view a hint of red \* on the row you can use 

```php
->required()
```

### Reactive Input

you can hide and show any input by using condition-by-reactive methods like

```php
Text::make('name')
  ->reactive()
  ->reactiveRow('active')
  ->reactiveBy('id')
  ->reactiveWhere(1)
  ->col(6)
  ->label(__('name'))
  ->required()
  ->validation([
    "create" => "required|string|max:255",
    "update" => "required|string|max:255"
  ]),
```

`->reactive()` tell the input you must hide until you get a condition. `->reactiveRow()` tell the input which row has the value that makes the current row show or hide. `->reactiveBy()` to make the row access object and it can be null if the value or reactiveRow is just string or int. `->reactiveWhere()` the condition of the selected row value like when you check the id it can be 1 or 2.

### API calls on change

sometimes you need to make an API request when the select box changed we make it easy for you to do that by using `->api()` method on `HasOne::class` or `Relation::class` like

```php
HasOne::make('model_id')
  ->reactive()
  ->reactiveRow('privacy')
  ->reactiveBy('id')
  ->reactiveWhere('private')
  ->validation("nullable|array")
  ->relation('model'),

Select::make('model_type')
  ->label(__('Type'))
  ->validation("required|array")
  ->options([
    Option::make(__("Users"))->id("App\Models\User")->api('model_id', "App\Models\User", __("Users")),
    Option::make(__("Accounts"))->id("App\Models\Account")->api('model_id', "App\Models\Account", __("Accounts"))
  ]),
```

`->api()` takes 3 args:

* the row name that we will fill with data coming from API.
* the model namespace or direct model to fetch data from it. 
* the label for the target input