What are built-in components in Ember.js?

Overview

The Ember components allow us to convert markup text and styles into reusable blocks of code. Apart from the reusability perspective, components also help us organize our code. Components can also be reused across different applications.

We can build our own components as well as use the built-in components provided by Ember. Out of the box, Ember provides two built-in components that can be used for form building:

  1. Input component
  2. Textarea component

Note: Built-in components are similar in HTML markup to their native counterparts.

Input component

The Input component in Ember can be used to create an input field where the user can enter data.

Syntax

<Input
  id="your-id-goes-here"
  @type="type-goes-here"
  @value="value-of-the-Input-component-goes-here"
/>

Parameters

The following values or parameters are needed to be passed into the Input component:

  • id: This is the unique id for the HTML element.

  • @type: This represents what type the Input component will be e.g. text, radio, search, etc.

  • @value: This specifies the default value for the Input component.

Example

Note: The piece code provided in the below widget is not the complete application’s code. Only necessary files are shown.

The following code snippet illustrates how the built-in Input component in Ember can be generated.

Note: To open the application inside a new tab, click on the link provided next to the line “Your app can be found at:”.

{{page-title "Input Component"}}

<div class="text-center1">
    <h1>Input component</h1>
</div>

<br>

<div class="text-center2">
    <Input
        id="sample-id"
        @type="text"
        @value="     Sample text field"
    />
</div>

{{!-- {{outlet}} --}}
Input component

Explanation

In the code snippet above:

  • Line 1: We set the page title.

  • Line 4: We add the heading using the h1 tag.

  • Lines 10-14: We add the Input component with the following properties:

    • id: “sample id”
    • @type: “text”
    • @value: “Sample text field”

Textarea component

The Textarea component in Ember can be used to define a multi-line text input control.

Syntax

<Textarea
  id="your-id-goes-here"
  @value="value-of-the-Textarea-component-goes-here"
  rows="number-of-rows-of-Textarea-component-goes-here"
  cols="number-of-columns-of-Textarea-component-goes-here"
/>

Parameters

The following values or parameters are needed to be passed into the Textarea component:

  • id: This is the unique id for the HTML element.

  • @value: This specifies the default value for the Textarea component.

  • rows: This specifies the number of rows inside the Textarea component.

  • cols: This specifies the number of columns inside the Textarea component.

Example

Note: The piece code provided in the below widget is not the complete application’s code. Only necessary files are shown.

The following code snippet illustrates how the built-in Textarea component in Ember can be generated.

Note: To open the application inside a new tab, click on the link provided next to the line “Your app can be found at:”.

{{page-title "Textarea Component"}}

<div class="text-center1">
    <h1>Textarea component</h1>
</div>

<br>

<div class="text-center2">
    <Textarea
        id="sample-id"
        @value="     Sample text area"
        rows="6"
        cols="80"
    />
</div>

{{!-- {{outlet}} --}}
Textarea component

Explanation

In the code snippet above:

  • Line 1: We set the page title.

  • Line 4: We add the heading using the h1 tag.

  • Lines 10-15: We add the Textarea component with the following properties:

    • id: “sample id”
    • @value: “Sample text area”
    • rows: 6
    • cols: 80

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved