UWC Components
  • Default
  • Material
  • Fluent

On this page

InputText

InputText renders a text field to enter data.

uwc-inputtext is a feature-rich text input built on Lit. It supports variants, sizes, prefix/suffix icon slots, input types, invalid/disabled/readonly states, and fluid layout.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcInputText } from '@uwc/components/inputtext';
customElements.define('uwc-inputtext', UwcInputText);

React

import { UwcInputText } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-inputtext placeholder="Enter text"></uwc-inputtext>`;
  }
}

React

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return <UwcInputText placeholder="Enter text" />;
}

Angular

import { Component } from '@angular/core';
import '@uwc/inputtext';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-inputtext placeholder="Enter text"></uwc-inputtext>`,
})
export class AppComponent {}

Vue

import '@uwc/inputtext';

export default {
  template: `<uwc-inputtext placeholder="Enter text"></uwc-inputtext>`,
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-overview-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext placeholder="Default"></uwc-inputtext>
        <uwc-inputtext placeholder="Filled" variant="filled"></uwc-inputtext>
        <uwc-inputtext placeholder="Invalid" invalid></uwc-inputtext>
        <uwc-inputtext placeholder="Disabled" disabled></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText placeholder="Default" />
      <UwcInputText placeholder="Filled" variant="filled" />
      <UwcInputText placeholder="Invalid" invalid />
      <UwcInputText placeholder="Disabled" disabled />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Default"></uwc-inputtext>
      <uwc-inputtext placeholder="Filled" variant="filled"></uwc-inputtext>
      <uwc-inputtext placeholder="Invalid" invalid></uwc-inputtext>
      <uwc-inputtext placeholder="Disabled" disabled></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Default"></uwc-inputtext>
      <uwc-inputtext placeholder="Filled" variant="filled"></uwc-inputtext>
      <uwc-inputtext placeholder="Invalid" invalid></uwc-inputtext>
      <uwc-inputtext placeholder="Disabled" disabled></uwc-inputtext>
    </div>
  `
};

Basic

Use placeholder and value to control the input content.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-basic-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext placeholder="Username"></uwc-inputtext>
        <uwc-inputtext value="Prefilled value"></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText placeholder="Username" />
      <UwcInputText value="Prefilled value" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Username"></uwc-inputtext>
      <uwc-inputtext value="Prefilled value"></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Username"></uwc-inputtext>
      <uwc-inputtext value="Prefilled value"></uwc-inputtext>
    </div>
  `
};

Variants

outlined (default) shows a border; filled uses a filled background.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-variants-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext placeholder="Outlined (default)"></uwc-inputtext>
        <uwc-inputtext placeholder="Filled" variant="filled"></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText placeholder="Outlined (default)" />
      <UwcInputText placeholder="Filled" variant="filled" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Outlined (default)"></uwc-inputtext>
      <uwc-inputtext placeholder="Filled" variant="filled"></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Outlined (default)"></uwc-inputtext>
      <uwc-inputtext placeholder="Filled" variant="filled"></uwc-inputtext>
    </div>
  `
};

Sizes

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-sizes-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext placeholder="Small" size="small"></uwc-inputtext>
        <uwc-inputtext placeholder="Medium (default)"></uwc-inputtext>
        <uwc-inputtext placeholder="Large" size="large"></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText placeholder="Small" size="small" />
      <UwcInputText placeholder="Medium (default)" />
      <UwcInputText placeholder="Large" size="large" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Small" size="small"></uwc-inputtext>
      <uwc-inputtext placeholder="Medium (default)"></uwc-inputtext>
      <uwc-inputtext placeholder="Large" size="large"></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Small" size="small"></uwc-inputtext>
      <uwc-inputtext placeholder="Medium (default)"></uwc-inputtext>
      <uwc-inputtext placeholder="Large" size="large"></uwc-inputtext>
    </div>
  `
};

Icons (Prefix & Suffix)

Place icons using the prefix and suffix slots.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-icons-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext placeholder="Search...">
          <uwc-icon slot="prefix" name="search" size="14px"></uwc-icon>
        </uwc-inputtext>
        <uwc-inputtext placeholder="Email" type="email">
          <uwc-icon slot="prefix" name="envelope" size="14px"></uwc-icon>
        </uwc-inputtext>
        <uwc-inputtext placeholder="Amount">
          <span slot="prefix" style="padding-inline-start:.75rem;color:#9ca3af;font-size:.875rem;">$</span>
          <uwc-icon slot="suffix" name="currency-dollar" size="14px"></uwc-icon>
        </uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText, UwcIcon } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText placeholder="Search...">
        <uwc-icon slot="prefix" name="search" size="14px"></uwc-icon>
      </UwcInputText>
      <UwcInputText placeholder="Email" type="email">
        <uwc-icon slot="prefix" name="envelope" size="14px"></uwc-icon>
      </UwcInputText>
      <UwcInputText placeholder="Amount">
        <span slot="prefix" style={{ paddingInlineStart: '.75rem', color: '#9ca3af', fontSize: '.875rem' }}>$</span>
        <uwc-icon slot="suffix" name="currency-dollar" size="14px"></uwc-icon>
      </UwcInputText>
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Search...">
        <uwc-icon slot="prefix" name="search" size="14px"></uwc-icon>
      </uwc-inputtext>
      <uwc-inputtext placeholder="Email" type="email">
        <uwc-icon slot="prefix" name="envelope" size="14px"></uwc-icon>
      </uwc-inputtext>
      <uwc-inputtext placeholder="Amount">
        <span slot="prefix" style="padding-inline-start:.75rem;color:#9ca3af;font-size:.875rem;">$</span>
        <uwc-icon slot="suffix" name="currency-dollar" size="14px"></uwc-icon>
      </uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Search...">
        <uwc-icon slot="prefix" name="search" size="14px"></uwc-icon>
      </uwc-inputtext>
      <uwc-inputtext placeholder="Email" type="email">
        <uwc-icon slot="prefix" name="envelope" size="14px"></uwc-icon>
      </uwc-inputtext>
      <uwc-inputtext placeholder="Amount">
        <span slot="prefix" style="padding-inline-start:.75rem;color:#9ca3af;font-size:.875rem;">$</span>
        <uwc-icon slot="suffix" name="currency-dollar" size="14px"></uwc-icon>
      </uwc-inputtext>
    </div>
  `
};
$

Input types

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-types-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext type="text" placeholder="Text"></uwc-inputtext>
        <uwc-inputtext type="password" placeholder="Password"></uwc-inputtext>
        <uwc-inputtext type="email" placeholder="Email"></uwc-inputtext>
        <uwc-inputtext type="number" placeholder="Number"></uwc-inputtext>
        <uwc-inputtext type="search" placeholder="Search"></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText type="text" placeholder="Text" />
      <UwcInputText type="password" placeholder="Password" />
      <UwcInputText type="email" placeholder="Email" />
      <UwcInputText type="number" placeholder="Number" />
      <UwcInputText type="search" placeholder="Search" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext type="text" placeholder="Text"></uwc-inputtext>
      <uwc-inputtext type="password" placeholder="Password"></uwc-inputtext>
      <uwc-inputtext type="email" placeholder="Email"></uwc-inputtext>
      <uwc-inputtext type="number" placeholder="Number"></uwc-inputtext>
      <uwc-inputtext type="search" placeholder="Search"></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext type="text" placeholder="Text"></uwc-inputtext>
      <uwc-inputtext type="password" placeholder="Password"></uwc-inputtext>
      <uwc-inputtext type="email" placeholder="Email"></uwc-inputtext>
      <uwc-inputtext type="number" placeholder="Number"></uwc-inputtext>
      <uwc-inputtext type="search" placeholder="Search"></uwc-inputtext>
    </div>
  `
};

Invalid state

The invalid attribute applies a red border indicating a validation error.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-invalid-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext placeholder="Required field" invalid></uwc-inputtext>
        <uwc-inputtext placeholder="Filled invalid" variant="filled" invalid></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText placeholder="Required field" invalid />
      <UwcInputText placeholder="Filled invalid" variant="filled" invalid />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Required field" invalid></uwc-inputtext>
      <uwc-inputtext placeholder="Filled invalid" variant="filled" invalid></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Required field" invalid></uwc-inputtext>
      <uwc-inputtext placeholder="Filled invalid" variant="filled" invalid></uwc-inputtext>
    </div>
  `
};

Disabled & Readonly

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-disabled-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
        <uwc-inputtext placeholder="Disabled" disabled></uwc-inputtext>
        <uwc-inputtext value="Read-only value" readonly></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem', maxWidth: '18rem' }}>
      <UwcInputText placeholder="Disabled" disabled />
      <UwcInputText value="Read-only value" readonly />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Disabled" disabled></uwc-inputtext>
      <uwc-inputtext value="Read-only value" readonly></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;max-width:18rem;">
      <uwc-inputtext placeholder="Disabled" disabled></uwc-inputtext>
      <uwc-inputtext value="Read-only value" readonly></uwc-inputtext>
    </div>
  `
};

Fluid

fluid stretches the input to fill its container.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('inputtext-fluid-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.5rem;">
        <uwc-inputtext placeholder="Full width" fluid></uwc-inputtext>
        <uwc-inputtext placeholder="Full width filled" variant="filled" fluid></uwc-inputtext>
      </div>
    `;
  }
}

import React from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
      <UwcInputText placeholder="Full width" fluid />
      <UwcInputText placeholder="Full width filled" variant="filled" fluid />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.5rem;">
      <uwc-inputtext placeholder="Full width" fluid></uwc-inputtext>
      <uwc-inputtext placeholder="Full width filled" variant="filled" fluid></uwc-inputtext>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.5rem;">
      <uwc-inputtext placeholder="Full width" fluid></uwc-inputtext>
      <uwc-inputtext placeholder="Full width filled" variant="filled" fluid></uwc-inputtext>
    </div>
  `
};

Reactive value

Listen to uwc-input (fires on every keystroke) or uwc-change (fires on blur) with { value }. 

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('inputtext-reactive-demo')
export class AppDemo extends LitElement {
  @state() private _val = '';

  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.5rem;max-width:20rem;">
        <uwc-inputtext
          placeholder="Type something..."
          fluid
          @uwc-input=${(e) => { this._val = e.detail.value; }}>
        </uwc-inputtext>
        <small style="color:#64748b;">Value: <strong>${this._val || '—'}</strong></small>
      </div>
    `;
  }
}

import React, { useState } from 'react';
import { UwcInputText } from '@uwc/components/react';

export default function App() {
  const [val, setVal] = useState('');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.5rem', maxWidth: '20rem' }}>
      <UwcInputText placeholder="Type something..." fluid onUwcInput={e => setVal(e.detail.value)} />
      <small style={{ color: '#64748b' }}>Value: <strong>{val || '—'}</strong></small>
    </div>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.5rem;max-width:20rem;">
      <uwc-inputtext
        placeholder="Type something..."
        fluid
        (uwc-input)="val.set($event.detail.value)">
      </uwc-inputtext>
      <small style="color:#64748b;">Value: <strong>{{ val() || '—' }}</strong></small>
    </div>
  `
})
export class AppComponent {
  readonly val = signal('');
}

export default {
  data() {
    return { val: '' };
  },
  template: `
    <div style="display:flex;flex-direction:column;gap:.5rem;max-width:20rem;">
      <uwc-inputtext
        placeholder="Type something..."
        fluid
        @uwc-input="val = $event.detail.value">
      </uwc-inputtext>
      <small style="color:#64748b;">Value: <strong>{{ val || '—' }}</strong></small>
    </div>
  `
};

Attributes

Name Type Default Description
value — — Current input value.
placeholder — — Placeholder text.
type — — Native input type. Default: text.
variant — — outlined | filled. Default: outlined.
size — — small | medium | large. Default: medium.
disabled — — Disable the input.
readonly — — Make the input read-only.
invalid — — Mark the input as invalid (red border).
fluid — — Stretch to fill container width.
maxlength — — Maximum character count.
name — — Input name for form submission.
autocomplete — — Native autocomplete attribute.

Properties

Name Type Default Description
styles CSSResultGroup [styles] —
value string '' —
placeholder string | undefined — —
type InputTextType 'text' —
name string | undefined — —
autocomplete string | undefined — —
maxlength number | undefined — —
variant InputTextVariant 'outlined' —
size InputTextSize 'medium' —
disabled boolean false —
readonly boolean false —
invalid boolean false —
fluid boolean false —

Slots

Name Description
prefix Icon/content shown before the input.
suffix Icon/content shown after the input.

Events

Name Type Description
uwc-input CustomEvent Fired on every keystroke.
uwc-change CustomEvent Fired when value is committed.
uwc-focus CustomEvent Fired on focus.
uwc-blur CustomEvent Fired on blur.

CSS Custom Properties

Name Default Description
--uwc-input-bg — Background color.
--uwc-input-border — Border shorthand.
--uwc-input-radius — Border radius.
--uwc-input-color — Text color.
--uwc-input-placeholder-color — Placeholder color.
--uwc-input-font-size — Font size.
--uwc-input-padding-x — Horizontal padding.
--uwc-input-padding-y — Vertical padding.

CSS Parts

Name Description
wrapper The outer wrapper div.
input The native <input> element.