Input Component

Figma

The glu-input component is a composite input field that supports a wide range of features, including an optional label, error messages, helper text, and prefix/suffix elements. It handles various input types such as text, currency, phone, password, date, url, search, and number. In addition, the component can be set to error, disabled, or read-only states, and it forwards any extra attributes to the underlying native <input> element. It also emits events like glChange, glFocus, and glBlur based on user interactions.

Basic Usage

Example 1: Simple Input

HTML
React
Vue
Angular

Result

Live Editor

<glu-input
  label="Name"
  placeholder="Enter your name"
  helperText="This is your full name"
></glu-input>

Result

Live Editor

<GluInput
  label="Name"
  placeholder="Enter your name"
  helperText="This is your full name"
/>

<glu-input
  label="Name"
  placeholder="Enter your name"
  helperText="This is your full name"
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Name"
  placeholder="Enter your name"
  helperText="This is your full name"
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Name"
      placeholder="Enter your name"
      helperText="This is your full name"
    ></glu-input>
  `
})
export class MyComponent {}

Input with Prefix and Suffix

The component supports prefix and suffix elements that adapt based on the input type or custom properties. For example, a currency input displays a "$" prefix, a search input shows a magnifying glass icon and, if text is entered, a clear icon appears; while password inputs offer a toggle icon for visibility.

HTML
React
Vue
Angular

Result

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <glu-input
    label="Amount"
    type="currency"
    placeholder="0.00"
  ></glu-input>

  <glu-input
    label="Search"
    type="search"
    placeholder="Search..."
    showClearIcon
  ></glu-input>
</div>

Result

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <GluInput
    label="Amount"
    type="currency"
    placeholder="0.00"
  />
  <GluInput
    type="search"
    placeholder="Search..."
    showClearIcon
  />
</div>

<glu-input
  label="Amount"
  type="currency"
  placeholder="0.00"
></glu-input>

<glu-input
  type="search"
  placeholder="Search..."
  showClearIcon
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Amount"
  type="currency"
  placeholder="0.00"
></glu-input>

<glu-input
  type="search"
  placeholder="Search..."
  showClearIcon
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Amount"
      type="currency"
      placeholder="0.00"
    ></glu-input>
    <glu-input
      type="search"
      placeholder="Search..."
      showClearIcon
    ></glu-input>
  `
})
export class MyComponent {}

Error and Helper Text

If an error message is provided, the component enters an error state and displays a default error icon alongside the error text. Alternatively, you can display additional helper text below the input.

HTML
React
Vue
Angular

Result

Live Editor

<glu-input
  label="Email"
  error="Invalid email address"
  helperIcon="error-icon"
  placeholder="Enter your email"
></glu-input>

Result

Live Editor

<GluInput
  label="Email"
  error="Invalid email address"
  helperIcon="error-icon"
  placeholder="Enter your email"
/>

<glu-input
  label="Email"
  error="Invalid email address"
  helperIcon="error-icon"
  placeholder="Enter your email"
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Email"
  error="Invalid email address"
  helperIcon="error-icon"
  placeholder="Enter your email"
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Email"
      error="Invalid email address"
      helperIcon="error-icon"
      placeholder="Enter your email"
    ></glu-input>
  `
})
export class MyComponent {}

Special Input Types

Password Input with Toggle

For password fields, clicking the suffix icon toggles the visibility of the password.

HTML
React
Vue
Angular

Result

Live Editor

<glu-input
  label="Password"
  type="password"
  placeholder="Enter your password"
></glu-input>

Result

Live Editor

<GluInput
  label="Password"
  type="password"
  placeholder="Enter your password"
/>

<glu-input
  label="Password"
  type="password"
  placeholder="Enter your password"
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Password"
  type="password"
  placeholder="Enter your password"
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Password"
      type="password"
      placeholder="Enter your password"
    ></glu-input>
  `
})
export class MyComponent {}

Advanced Examples

Example 5: Disabled and Read-Only Inputs

Demonstrate inputs in disabled and read-only states.

HTML
React
Vue
Angular

Result

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <glu-input
    label="Disabled Input"
    placeholder="Cannot type here"
    disabled
  ></glu-input>

  <glu-input
    label="Read-Only Input"
    placeholder="Read-only text"
    readOnly
    value="This is fixed"
  ></glu-input>
</div>

Result

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <GluInput
    label="Disabled Input"
    placeholder="Cannot type here"
    disabled
  />
  <GluInput
    label="Read-Only Input"
    placeholder="Read-only text"
    readOnly
    value="This is fixed"
  />
</div>

<glu-input
  label="Disabled Input"
  placeholder="Cannot type here"
  disabled
></glu-input>

<glu-input
  label="Read-Only Input"
  placeholder="Read-only text"
  readOnly
  value="This is fixed"
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Disabled Input"
  placeholder="Cannot type here"
  disabled
></glu-input>

<glu-input
  label="Read-Only Input"
  placeholder="Read-only text"
  readOnly
  value="This is fixed"
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Disabled Input"
      placeholder="Cannot type here"
      disabled
    ></glu-input>
    <glu-input
      label="Read-Only Input"
      placeholder="Read-only text"
      readOnly
      value="This is fixed"
    ></glu-input>
  `
})
export class MyComponent {}

Example 6: Input with Both Prefix and Suffix Text

Combine prefix and suffix text to create inputs with additional context.

HTML
React
Vue
Angular

Result

Live Editor

<glu-input
  label="Website"
  type="url"
  placeholder="your-site"
></glu-input>

Result

Live Editor

<GluInput
  label="Website"
  placeholder="your-site"
  type="url"
/>

<glu-input
  label="Website"
  placeholder="your-site"
  type="url"
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Website"
  placeholder="your-site"
  type="url"
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Website"
      placeholder="your-site"
      type="url"
    ></glu-input>
  `
})
export class MyComponent {}

Example 7: Phone Input

Showcase a phone input field with an appropriate prefix icon.

HTML
React
Vue
Angular

Result

Live Editor

<glu-input
  label="Phone"
  type="phone"
  placeholder="(123) 456-7890"
></glu-input>

Result

Live Editor

<GluInput
  label="Phone"
  type="phone"
  placeholder="(123) 456-7890"
/>

<glu-input
  label="Phone"
  type="phone"
  placeholder="(123) 456-7890"
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Phone"
  type="phone"
  placeholder="(123) 456-7890"
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Phone"
      type="phone"
      placeholder="(123) 456-7890"
    ></glu-input>
  `
})
export class MyComponent {}

Example 8: Date Input with Picker

Utilize the date input type to trigger a date picker.

HTML
React
Vue
Angular

Result

Live Editor

<glu-input
  label="Date of Birth"
  type="date"
  placeholder="YYYY-MM-DD"
></glu-input>

Result

Live Editor

<GluInput
  label="Date of Birth"
  type="date"
  placeholder="YYYY-MM-DD"
/>

<glu-input
  label="Date of Birth"
  type="date"
  placeholder="YYYY-MM-DD"
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  label="Date of Birth"
  type="date"
  placeholder="YYYY-MM-DD"
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      label="Date of Birth"
      type="date"
      placeholder="YYYY-MM-DD"
    ></glu-input>
  `
})
export class MyComponent {}

Example 9: Search Input with Clear Icon

A dedicated search input that displays a clear icon when text is entered.

HTML
React
Vue
Angular

Result

Live Editor

<glu-input
  type="search"
  placeholder="Search for items..."
  showClearIcon
></glu-input>

Result

Live Editor

<GluInput
  type="search"
  placeholder="Search for items..."
  showClearIcon
/>

<glu-input
  type="search"
  placeholder="Search for items..."
  showClearIcon
></glu-input>

<script setup>
import { GluInput } from '@gelato-ui/vue';
</script>

<glu-input
  type="search"
  placeholder="Search for items..."
  showClearIcon
></glu-input>

import { Component } from '@angular/core';
import { GluInput } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluInput],
  template: `
    <glu-input
      type="search"
      placeholder="Search for items..."
      showClearIcon
    ></glu-input>
  `
})
export class MyComponent {}

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	Disables the input field, preventing user interaction.	`boolean`	`false`
`error`	`error`	The error message to display below the input. When non-empty, the component enters an error state and a default error icon is used.	`string`	`undefined`
`helperIcon`	`helper-icon`	The name of the helper icon displayed alongside the helper text. If an error exists, a default error icon is shown instead.	`string`	`undefined`
`helperIconVariant`	`helper-icon-variant`	Specifies the visual variant for the helper icon. Allowed values: 'solid' or 'outline'.	`"outline" \| "solid"`	`'outline'`
`helperText`	`helper-text`	Supplemental helper text displayed below the input.	`string`	`undefined`
`isError`	`is-error`	Renders the input with error styling when true.	`boolean`	`false`
`label`	`label`	Optional label text displayed above the input field.	`string`	`undefined`
`placeholder`	`placeholder`	Placeholder text displayed when the input field is empty.	`string`	`undefined`
`prefixIcon`	`prefix-icon`	The name of the prefix icon displayed on the left side of the input.	`string`	`undefined`
`prefixIconVariant`	`prefix-icon-variant`	Defines the visual variant for the prefix icon. Allowed values: 'solid' or 'outline'.	`"outline" \| "solid"`	`'outline'`
`prefixText`	`prefix-text`	Optional text displayed as a prefix adjacent to the input field.	`string`	`undefined`
`readOnly`	`read-only`	Renders the input field in read-only mode, allowing focus and selection but preventing edits.	`boolean`	`false`
`showClearIcon`	`show-clear-icon`	When true and the input type is 'search', displays a clear icon to reset the input.	`boolean`	`false`
`suffixIcon`	`suffix-icon`	The name of the suffix icon displayed on the right side of the input.	`string`	`undefined`
`suffixIconVariant`	`suffix-icon-variant`	Defines the visual variant for the suffix icon. Allowed values: 'solid' or 'outline'.	`"outline" \| "solid"`	`'outline'`
`suffixText`	`suffix-text`	Optional text displayed as a suffix adjacent to the input field.	`string`	`undefined`
`type`	`type`	Determines the type of the input field. Supported types include 'generic', 'currency', 'phone', 'password', 'date', 'url', 'search', 'number' or any valid InputType. This setting affects both the native input type and UI behavior.	`InputType \| "currency" \| "phone"`	`'text'`
`value`	`value`	The current value of the input field. This property is mutable to support two-way binding.	`any`	`undefined`

Events

Event	Description	Type
`glBlur`	Emitted when the input value changes.	`CustomEvent<FocusEvent>`
`glChange`	Emitted when the input value changes.	`CustomEvent<InputChangeEventDetail>`
`glFocus`	Emitted when the input element gains focus.	`CustomEvent<FocusEvent>`

Dependencies

Depends on

Graph

Built with StencilJS

Basic Usage​

Example 1: Simple Input​

Input with Prefix and Suffix​

Error and Helper Text​

Special Input Types​

Password Input with Toggle​

Advanced Examples​

Example 5: Disabled and Read-Only Inputs​

Example 6: Input with Both Prefix and Suffix Text​

Example 7: Phone Input​

Example 8: Date Input with Picker​

Example 9: Search Input with Clear Icon​

Properties​

Events​

Dependencies​

Depends on​

Graph​

Basic Usage

Example 1: Simple Input

Input with Prefix and Suffix

Error and Helper Text

Special Input Types

Password Input with Toggle

Advanced Examples

Example 5: Disabled and Read-Only Inputs

Example 6: Input with Both Prefix and Suffix Text

Example 7: Phone Input

Example 8: Date Input with Picker

Example 9: Search Input with Clear Icon

Properties

Events

Dependencies

Depends on

Graph