Text Field

Use cases:

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

Example

Simple text field

Number field with start slot

$

%

Disabled text field

React

Declaration

<rapid-text-field>Sample Text Field</rapid-text-field>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <div>
        <label>Simple text field</label>
        <rapid-text-field
            :value=${sync((x) => x.fieldValue)}
            @change="${(x, ctx) => x.fieldValueChanged(ctx.event)}"
            type="text">
        </rapid-text-field>
    </div>
    <div>
        <label>Number field with start, end slots and placeholder text</label>
        <rapid-text-field
            @change="${(x, ctx) => x.fieldValueChanged(ctx.event)}"
            type="number">
            <div slot="start">$</div>
            <div slot="end">$</div>
        </rapid-text-field>
    </div>
    <div>
        <label>Disabled text field</label>
        <rapid-text-field type="text" disabled>
        </rapid-text-field>
    </div>
  `,
})
export class MyElement extends GenesisElement {
  @observable fieldValue = '';
  fieldValueChanged() {
    console.log(this.fieldValue);
  }
}

Genesis

Declaration

<TextField></TextField>

Usage

import { TextField } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {

  const [textFieldValue, setTextFieldValue] = useState(false);

  const handleTextFieldChanged = (event) => {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
    setTextFieldValue(target.value)
  };
  return (
    <div>
      <label>Simple text field</label>
      <TextField type="text">
      </TextField>
    </div>
    <div>
        <label>Number field with start, end slot and placeholder</label>
        <TextField onChange={handleTextFieldChanged} type="number" placeholder="Enter text here">
            <div slot="start">$</div>
            <div slot="end">%</div>
        </TextField>
    </div>
    <div>
        <label>Disabled text field</label>
        <TextField type="text" disabled>
        </TextField>
    </div>
  );
}

Angular

Declaration

<rapid-text-field></rapid-text-field>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
      <div>
          <label>Simple text field</label>
          <rapid-text-field (change)="fieldValueChanged($event)" type="text">
          </rapid-text-field>
      </div>
      <div>
          <label>Number field with start slot</label>
          <rapid-text-field
                  (change)="fieldValueChanged($event)"
                  placeholder="Enter amount here"
                  type="number">
              <div slot="start">$</div>
              <div slot="end">%</div>
          </rapid-text-field>
      </div>
      <div>
          <label>Disabled text field</label>
          <rapid-text-field type="text" disabled>
          </rapid-text-field>
      </div>
  `,
  styleUrls: ['./my.component.css'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {

  textFieldValue: string;

  fieldValueChanged(event: Event): void {
    console.log((event.target as HTMLInputElement).value);
    this.textFieldValue = (event.target as HTMLInputElement).value
  }
}

API

Property and attribute binding examples for Genesis Component syntax.

Attributes

Name	Type	Description	Example
autofocus	boolean	When true, the component will be focused when the page has finished loading	<rapid-text-field ?autofocus="${(x) => x.autoFocus}">
appearance	string	Can be outline or filled	<rapid-text-field appearance="outline">
disabled	boolean	Similar to readonly, but with a blur on the component	<rapid-text-field ?disabled="${(x) => x.isDisabled}">
form	string	Associates 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	<rapid-text-field form="myForm">
maxlength	number	The maximum number of characters allowed	<rapid-text-field maxlength="${(x) => x.maxLength}">
minlength	number	The minimum number of characters allowed	<rapid-text-field minlength="${(x) => x.minLength}">
name	string	Defines the name of the element	<rapid-text-field name="username">
placeholder	string	Sets placeholder text for the element (which disappears when the user starts typing)	<rapid-text-field placeholder="Enter your name">
readonly	boolean	If true, the user cannot change the value of this field	<rapid-text-field ?readonly="${(x) => x.isReadonly}">
size	number	Sets the width of the component	<rapid-text-field size="${(x) => x.fieldSize}">
step	number	Only works with type="number". Defines the amount the field value changes each time the user clicks to increase or decrease the field value	<rapid-text-field type="number" step="${(x) => x.stepValue}">
type	string	Sets the type of the text-field. Can be "email" | "password" | "tel" | "number" | "text" | "url".	<rapid-text-field type="email">
value	string	Sets the value for this component. Use the sync utility to bind the data the template back to the model.	<rapid-text-field value="${sync((x) => x.fieldValue)}">

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Use
start	Start slot.
control	The input element.
end	End slot.

Example

Numeric amount using $ symbol in start slot

Simple text field

Number field with start slot

$

%

Disabled text field

Implementation

<rapid-text-field type="text" inputmode="numeric" pattern="\d*">
    <div slot="start">
        $
    </div>
</rapid-text-field>

Parts

Part
start
control
end

Fired Events

This component doesn't emit any events.

Listened Events

This component doesn't listen to any events.

Further details

This component is an implementation of an HTML text-field element.