> Markdown version of [Using Components](https://vaadin.com/docs/next/hilla/lit/components/using-vaadin-components). Section index: [llms.txt](https://vaadin.com/docs/next/hilla/llms.txt)

# Using Vaadin Components in Hilla

All Vaadin components come with Hilla, so they are installed already. To use a component in a view, it’s enough to import it into the view `.ts` file. For example:

```typescript
import '@vaadin/text-field';
```

You can then use the [Text Field](https://vaadin.com/docs/components/text-field) component (the `<vaadin-text-field>` element) in your view’s `render()` method:

```typescript
render() {
  return html`
    <vaadin-text-field id="firstname" label="First name"></vaadin-text-field>
    <vaadin-text-field id="lastname" label="Last name"></vaadin-text-field>
  `;
}
```

## <a id="component-class"></a>Component Class

The class name of a `<vaadin-component-name>` element follows the pattern `ComponentName`. Importing the class gives type-safe access to the component’s API. For example:

`greeting-view.ts`

```typescript
import '@vaadin/checkbox';
import '@vaadin/combo-box';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { ComboBoxValueChangedEvent } from '@vaadin/combo-box';

@customElement('greeting-view')
export class GreetingView extends LitElement {
  @state()
  private greetings = ['Hi', 'Hello', 'Dear'];

  @state()
  private allowCustomGreeting = false;

  @state()
  private greeting = 'Hi';

  render() {
    return html`
      <vaadin-combo-box
        label="Greeting"
        .items="${this.greetings}"
        .allowCustomValue="${this.allowCustomGreeting}"
        .value="${this.greeting}"
        @value-changed="${(e: ComboBoxValueChangedEvent) => (this.greeting = e.detail.value)}"
      ></vaadin-combo-box>
      <vaadin-checkbox
        @change="${this.checkboxChange}"
        label="Type Custom greeting"
      ></vaadin-checkbox>
    `;
  }

  checkboxChange(event: Event) {
    this.allowCustomGreeting = (event.target as HTMLInputElement).checked;
    if (!this.allowCustomGreeting) {
      this.greeting = this.greetings[0];
    }
  }
}
```

In the preceding example, the [Combo Box](https://vaadin.com/docs/components/combo-box) and [Checkbox](https://vaadin.com/docs/components/checkbox) components with the IDs `greeting` and `custom` respectively are mapped to typed class variables of the same names via the `@query` decorator. The Checkbox event listener toggles the `allowCustomValue` property of the Combo Box, which defines whether the user can enter custom values into the field or is constrained to the alternatives in the items overlay. Having strongly typed class variables helps to catch errors at compile time and allows code completion in the IDE.

## <a id="html-attributes"></a>HTML Attributes

The following HTML attributes work as expected with most Vaadin components:

- `disabled`

  Whether the component is enabled; a disabled component cannot be interacted with.

- `title`

  Additional label associated with the component, shown as a tooltip.

- `hidden`

  Visibility; set this attribute to hide the element.

See the [Vaadin documentation](https://vaadin.com/docs/components) for a full list of components and detailed API documentation.

See the [Styling](https://vaadin.com/docs/next/hilla/lit/guides/styling.md) page to learn how to style the components.