Textfield Component

The Textfield Component closely follows Material Design specifications and has two different styles - default and outlined.


  • id - Required. A unique name for the Textfield.
  • title - Similar to a label Element, but functions in an inline way.
  • value - Like with a regular HTML text input, this is the current value of the textfield.
  • outlined - Whether the Textfield should use the outlined design variant. Defaults to false.
  • error - A short error to display under the element. An empty string will not count as an error.
  • help - Help text to display under the element. Will be overridden by error until the error is cleared.
  • max - An integer value for the maximum length of the contained string.
  • disabled - Whether the input is disabled and cannot be focussed. Defaults to false.


const $textfield = window.casthub.create('textfield');
$textfield.id = 'hello-world-1';
$textfield.title = 'Hello world!';
$textfield.help = 'Just a simple Textfield';
const $textfield = window.casthub.create('textfield');
$textfield.id = 'hello-world-2';
$textfield.title = 'Hello world!';
$textfield.outlined = true;
$textfield.max = 20;
$textfield.error = 'Whoops!';