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

---

`id` | `->setId()`

The ID of the component, differs from the component UUID, this is the html tag `id=""` content.
- In the `Form` components is set directly on the field
- In the `Visual` components is set on the outest element

| Types    | Default |
|----------|---------|
| `string` | `null`  |

Raw HTML `id=""` for the field (Form) or outermost element (Visual). Distinct from auto-generated `uuid`: `id` is for CSS / JS targeting, `uuid` is framework identity. When omitted (`null`) no custom `id` renders (uuid still exists internally).
Must be unique per page; duplicates break JS selectors.

### Example
Blade:
```php
{!! \KFramework\Components\Forms\Input::make()->setName('email')->setId('signup-email') !!}
```
Controller:
```php
Input::make('email')->setId('signup-email');
```

### Interaction / tips
- Pair with `classes` (../shared_attributes/classes.md): `id` for JS, `classes` for styling.
- Use `extraAttributes` (../shared_attributes/extra_attributes.md) for `data-*` hooks instead of overloading `id`.
- Do not confuse with `uuid` (../shared_attributes/uuid.md) or `name` (../shared_attributes/name.md).

See also: [uuid](uuid.md), [name](name.md), [classes](classes.md), [extraAttributes](extra_attributes.md), [basics](../basics.md), [Input](../forms/input.md).