Skip to main content
Version: Current

Web Components - Text field

A text field is an interactive or graphic web component that enables users to input and edit text. It is a fundamental component of forms, dialogs and user interfaces.


import { provideDesignSystem, alphaTextField } from '@genesislcap/alpha-design-system';



When you declare an <alpha-text-field>, you can define the following attributes:

autofocusbooleanWhen true, the component will be focused when the page has finished loading
appearancestringCan be outline or filled
disabledbooleanSimilar to readonly, but with a blur on the component
formstringAssociates this component with a form. Form id needs to be passed. If no Id is provided, then it will be associated with the ancestor form
maxlengthnumberThe maximum number of characters allowed
minlengthnumberThe minimum number of characters allowed
namestringDefines the name of the element
placeholderstringSets placeholder text for the element (which disappears when the user starts typing)
readonlybooleanIf true, the user cannot change the value of this field
sizenumberSets the width of the component
stepnumberOnly works with type="number. Defines the amount the field value changes each time the user clicks to increase or decrease the field value
typestringSets the type of the text-field. Can be url
valuestringSets the value for this component


All examples below use the alpha-design-system. If you are using any other design system, change the declaration of the component accordingly.

  • Example 1: a text-field with a max length of 10 characters and placeholder text
Example 1
<alpha-text-field maxlength="10" placeholder="This is a placeholder">Name</alpha-text-field>
  • Example 2: a text-field with a size of 30 and type password
Example 2
<alpha-text-field size="30" type="password">Name</alpha-text-field>
  • Example 3: a read-only text-field with placeholder text
Example 3
<alpha-text-field readonly placeholder="you can't touch me">Name</alpha-text-field>
  • Example 4: a text-field with type "number" and step 0.5
Example 3
<alpha-text-field type="number" step="0.5">Name</alpha-text-field>

Get the user input

Once the user has input a value to this component, you need to make it accessible to the application:

  1. Create an @observable variable where you want to use this value:
import {... , observable} from '@genesislcap/web-core';
export class TEMPLATE extends GenesisElement {
@observable text_field: string
  1. Use the sync function to insert the value from the component into the variable text_field:
import {sync} from '@genesislcap/foundation-utils';
<alpha-text-field value=${sync((x) => x.text_field)}>TEXT</alpha-text-field>

From this point, you can access the value of the component in your application.

Try yourself

Live Editor
<alpha-text-field placeholder="yourself">try</alpha-text-field>

Use cases

  • User registration and login
  • Data entry
  • Search boxes
  • Comment sections
  • Search filters