# [Usage](../../../usage.md) > [Components and standard attributes](../basics.md) > extraAttributes

---
`extraAttributes` | `->setExtraAttributes([])`

To optionally add extra attributes on the component, this will help in the front-end. Where the attribute name is the `key` of the array record:
```php
[
    'data-attr-1' => 'value_1',
    'data-attr-2' => 'value_2',
    ...
]
```

will result in:

```html
    <div data-attr-1="value_1" data-attr-2="value_2" ...
```

- In the `Form` components is set directly on the field
- In the `Visual` components is set on the outest element

| Types   | Default |
|---------|---------|
| `array` | `[]`    |

Renders arbitrary HTML attributes on the field (Form components) or outermost element (Visuals). Keys are attribute names, values are attribute values. When omitted (`[]`) nothing extra is rendered. Ideal for `data-*` hooks, Alpine / JS bindings, `aria-*`, or `target`.
Filtered to exclude `style` (use `style` attribute instead).

### Example
Blade:
```php
{!! \KFramework\Components\Forms\Input::make()->setName('email')->setExtraAttributes(['data-track' => 'signup', 'aria-label' => 'Email']) !!}
```
Controller:
```php
Input::make()->setName('email')->setExtraAttributes(['data-track' => 'signup']);
```

### Interaction / tips
- Use `classes` (../shared_attributes/classes.md) for styling and `id` (../shared_attributes/id.md) for unique selectors; `extraAttributes` for the rest.
- Combine with `style` (../shared_attributes/style.md) for inline CSS (style key is ignored here).
- Values accept Closures resolved at render.

See also: [classes](classes.md), [id](id.md), [style](style.md), [customProperty](custom_property.md), [basics](../basics.md), [Input](../forms/input.md).