Textfield

import { Textfield } from "@lualtek/react-components";
 
export default () => {
  return <Textfield label="Sample label" />;
};

export type TextfieldProps = InputHTMLAttributes<HTMLInputElement> & {
  /**
   * Set the icon to show on the left or right side of the input.
   */
  icon?: IconProps["source"];
 
  /**
   * Set in which side of the field the icon should be displayed.
   * @default 'end'
   */
  iconPosition?: "start" | "end";
 
  /**
   * Define the accessible label of the input. While this is not
   * mandatory, an input should always have a label. If not using this property
   * you can bind a custom label to the input by using an id.
   */
  label: string;
 
  /**
   * Set the input type. The value can be anything that
   * is supported by the HTML input element.
   *
   * Read more: https://developer.mozilla.org/en-US/Learn/Forms/HTML5_input_types
   *
   * @default 'text'
   */
  type?: string;
 
  /**
   * Set the field into a readonly state. When readonly, the field value
   * cannot be edited but it can still be selected and copied.
   */
  readOnly?: boolean;
 
  /**
   * Set the field into a disabled state. When disabled, the field value cannot be
   * edited, selected or copied, but it can still be focused and navigated by AT.
   */
  disabled?: boolean;
 
  /**
   * The callback function that is called when the input value changes.
   */
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 
  /**
   * Make the textfield full width, filling the available space.
   */
  fullWidth?: boolean;
  /**
   * Show the action button on the right side of the input.
   *
   * @important This prop prevent icon to be displayed.
   */
  showClearButton?: boolean;
 
  /**
   * Event handler for the clear button.
   *
   * @returns void
   */
  onClear?: () => void;
};