Skip to main content

Textfield

Text field.

Props​

  • name (string): name HTML attribute to set to the element.
  • [OPTIONAL] id (string): id HTML attribute to set to the element.
  • [OPTIONAL] label (string): Element label. Supports light markdown.
  • [OPTIONAL] helper (string): Element helper. Supports light markdown.
  • [OPTIONAL] placeholder (string): placeholder HTML attribute to set to the element.
  • [OPTIONAL] modifiers (string): List of modifiers to apply to the element. Defaults to "".
  • [OPTIONAL] maxLength (number): maxlength HTML attribute to set to the element.
  • [OPTIONAL] size (number): size HTML attribute to set to the element.
  • [OPTIONAL] min (number): min HTML attribute to set to the element.
  • [OPTIONAL] max (number): max HTML attribute to set to the element.
  • [OPTIONAL] step (number): step HTML attribute to set to the element.
  • [OPTIONAL] autofocus (boolean): autofocus HTML attribute to set to the element. Defaults to false.
  • [OPTIONAL] readonly (boolean): readonly HTML attribute to set to the element. Defaults to false.
  • [OPTIONAL] type ("text" | "email" | "number" | "password" | "search" | "tel" | "url"): type HTML attribute to set to the element. Defaults to text.
  • [OPTIONAL] autocomplete ("on" | "off"): autocomplete HTML attribute to set to the element. Defaults to off.
  • [OPTIONAL] value (string | number): Input value. Updating this prop with a new value will replace the current value by the one passed. Defaults to "".
  • [OPTIONAL] iconPosition ("left" | "right"): Position of the icon relatively to the label. Defaults to "left".
  • [OPTIONAL] icon (string): Name of the icon to set to the element.
  • [OPTIONAL] debounceTimeout (number): Number of milliseconds to wait before triggering the change event. If user changes the input value during that time, the timeout is reset. This is especially useful to limit the number of triggers, if you want to use this component as an autocomplete performing HTTP requests on user inputs, for instance. Defaults to 50.
  • [OPTIONAL] allowedKeys (Record<"default" | "altKey" | "ctrlKey" | "shiftKey" | "metaKey", RegExp>): List of RegExp patterns used to filter user inputs and keep only authorized characters. Useful for purpose-specific inputs, like phone numbers (you only want to allow digits). default is used to filter all inputs, and the others keys are used to allow specific patterns when holding special keys, like Ctrl.
  • [OPTIONAL] transform ((value: string, selectionStart: number) => [string, number?]): Transformation function that will format input value. This is especially useful for purpose-specific inputs, like phone numbers (you want to format the number to something like (XXX) XXX-XXXX).
  • [OPTIONAL] disabled (boolean): When element is disabled, a special disabled modifier is automatically added, and all its user interactions are disabled. Defaults to false.

Events​

  • change (newValue: string, event: InputEvent) => void: Triggered whenever input value is modified.
  • focus (currentValue: string, event: FocusEvent) => void: Triggered whenever the input is focused.
  • blur (currentValue: string, event: FocusEvent) => void: Triggered whenever the input is blurred.
  • paste (event: ClipboardEvent) => void: Triggered whenever user pastes content in the input.
  • keyDown (event: KeyboardEvent) => void: Triggered whenever user presses a key in the input.
  • iconClick (event: MouseEvent) => void: Triggered whenever user clicks on the icon.
  • iconKeyDown (event: KeyboardEvent) => void: Triggered whenever user presses a key on the icon.

Behavior​

  • While user is typing, updating the value prop won't have any effect within the debounceTimeout duration. This ensures that value is not directly updated while user is typing, which would lead to a bad UX.

Syntax​

<UITextfield
  id="my-id"
  modifiers="large"
  name="test"
  type="text"
  autofocus
  value="Hello"
  size={14}
  maxlength={14}
  autocomplete="on"
  placeholder="Type here..."
  onChange={onChange}
  onFocus={onFocus}
  onBlur={onBlur}
  onPaste={onPaste}
  onKeyDown={onKeyDown}
  onIconKeyDown={onIconKeyDown}
  onIconClick={onIconClick}
/>

Syntax - with number type​

<UITextfield
  name="test"
  type="number"
  min={0}
  max={10}
  step={1}
/>

Syntax - with label and helper​

<UITextfield
  name="test"
  label="Label"
  helper="Helper"
/>

Syntax - disabled​

<UITextfield
  name="test"
  disabled
/>

Syntax - readonly​

<UITextfield
  name="test"
  readonly
/>

Syntax - with left icon​

<UITextfield
  name="test"
  icon="star"
/>

Syntax - with right icon​

<UITextfield
  name="test"
  icon="star"
  iconPosition="right"
/>