Input Field

Allows users to enter or edit text or data, providing an interface for capturing user input in various forms

Overview

The InputField component includes including an input, icon, end adornment, and helper text.

Example: InputField

  import { Icon, InputField } from '@skiff-org/skiff-ui';
  const [value, setValue] = useState('');

  <InputField
    endAdornment={Icon.Close}
    icon={Icon.Search}
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
    placeholder='Placeholder'
  />

Types

There are four types of inputs: default (normal text input), email, number, and password.

Example: InputField types

  import { Icon, InputField } from '@skiff-org/skiff-ui';

  <InputField icon={Icon.Edit} placeholder='Enter text' type='default' />
  <InputField icon={Icon.Envelope} placeholder='Enter email' type='email' />
  <InputField icon={Icon.QrCode} placeholder='Enter code' type='number' />
  <InputField icon={Icon.Lock} placeholder='Enter password' type='password' />

Customization

You can customize the style of the InputField border radius and caret color, or remove all styling entirely.

Example: InputField types

  import { Icon, InputField } from '@skiff-org/skiff-ui';
  <InputField
    icon={Icon.Search}
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
    placeholder='Placeholder'
  />

Properties

  • Name
    endAdornment
    Type
    Icon | React.ReactNode | React.ReactNode[]
    Description

    Element displayed at the end of the InputField.

  • Name
    innerRef
    Type
    React.Ref<HTMLInputElement>
    Description

    Ref passed to inner input component.

  • Name
    readOnly
    Type
    boolean
    Description

    Whether the field is a readOnly field

  • Name
    type
    Type
    Icon
    Description

    Type of Input. Either DEFAULT, EMAIL, NUMBER, or PASSWORD`.

  • Name
    onBlur
    Type
    (e: React.FocusEvent<HTMLInputElement>) => void
    Description

    Function called onBlur event.

  • Name
    onChange
    Type
    (e: React.ChangeEvent<HTMLInputElement>) => void
    Description

    Function called onChange event.

  • Name
    onFocus
    Type
    (e: React.FocusEvent<HTMLInputElement>) => void
    Description

    Function called onFocus event.

  • Name
    onKeyDown
    Type
    (e: React.KeyboardEvent<HTMLInputElement>) => void
    Description

    Function called onKeyDown event.

  • Name
    onKeyPress
    Type
    (e: React.KeyboardEvent<HTMLInputElement>) => void
    Description

    Function called onKeyPress event.

  • Name
    onPaste
    Type
    React.ClipboardEventHandler<HTMLInputElement> | ((e?: React.ClipboardEvent<HTMLDivElement>) => void)
    Description

    Function called onPaste event.

InputField Properties

  • Name
    active
    Type
    boolean
    Description

    Controlled active state.

  • Name
    autoComplete
    Type
    string
    Description

    Input autocomplete attribute

  • Name
    autoFocus
    Type
    boolean
    Description

    Autofocus the input when it mounts.

  • Name
    borderRadius
    Type
    number
    Description

    Custom border radius.

  • Name
    caretColor
    Type
    IconColor
    Description

    Set the caret-color CSS property

  • Name
    disabled
    Type
    boolean
    Description

    Disable editing.

  • Name
    errorMsg
    Type
    string
    Description

    Error message.

  • Name
    forceTheme
    Type
    ThemeMode
    Description

    Force the theme of the InputField.

  • Name
    ghost
    Type
    boolean
    Description

    Remove background and padding.

  • Name
    helperText
    Type
    string
    Description

    Displays additional context about the field's input

  • Name
    icon
    Type
    Icon
    Description

    InputField icon.

  • Name
    size
    Type
    InputFieldSize
    Description

    InputField size.

  • Name
    value
    Type
    string
    Description

    Controlled InputField value

  • Name
    weight
    Type
    TypographyWeight
    Description

    Font weight inside the InputField.