Textfield

RC 1.7Kb

import 'pyro/textfield'

Preview Code Stackblitz

Usage

<pyro-textfield type="text" state="success" clearable
    placeholder="place" severity="success"></pyro-textfield>

Variations

Props

interface TextfieldProps {
  /** Type of the input, or 'textarea'  */
  type?: 'text' | 'textarea' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
  /** Value of the input */
  value: string;
  /** Caption below the textfield, for description or errors */
  caption?: string;
  /** State and color of the textfield */
  severity?: Severity;
  /** Placeholder */
  placeholder?: string;
  /** Required */
  required?: string;
  /** Disabled */
  disabled?: string;
  /** Clearable */
  clearable?: boolean;
  /* Emitted when the value changes */
  onInput?: (e: TargetValueEvent) => void;
  children?: any;
}

Slots

/**
 * @slot action - Space for icon-like action inside the textfield, like a custom `clearable
 */

CSS prop theming

The

Full theming sheet

/**
 * @prop {--pyro-textfield-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-textfield-surface-color = --pyro-surface-color} - `background`
 * @prop {--pyro-textfield-border = --pyro-border} - `border`
 * @prop {--pyro-textfield-border-radius = --pyro-border-radius} - `border-radius`
 * @prop {--pyro-textfield-min-width = --pyro-fields-min-width} - `min-width`
 * @prop {--pyro-textfield-spacing = --pyro-spacing} - `padding`
 * @prop {--pyro-textfield-font-size = --pyro-font-size} - `font-size`
 * @prop {--pyro-textfield-caption-text-color, inherit} - `color`
 * @prop {--pyro-textfield-info-color = --pyro-info-color} - `color`
 * @prop {--pyro-textfield-success-color = --pyro-success-color} - `color`
 * @prop {--pyro-textfield-warning-color = --pyro-warning-color} - `color`
 * @prop {--pyro-textfield-error-color = --pyro-error-color} - `color`
 * @prop {--pyro-textfield-disabled-color = --pyro-disabled-color} - disabled `background`
 */