Interface InputFieldProps

Props for the InputField component.

interface InputFieldProps {
    appendIcon?: ReactNode;
    appendText?: string;
    backgroundColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    borderColor?: | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg";
    borderRadius?: string;
    fontSize?: string
    | number;
    label?: string;
    maxWidth?: number;
    onChange: (value: string) => void;
    placeholderColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    placeholderFontSize?: string
    | number;
    prependIcon?: ReactNode;
    prependText?: string;
    textColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    value: string;
    variant?: "filled"
    | "outlined"
    | "standard";
}

Hierarchy

  • Omit<TextFieldProps, "value" | "onChange">
    • InputFieldProps

Properties

appendIcon? appendText? backgroundColor? borderColor? borderRadius? fontSize? label? maxWidth? onChange placeholderColor? placeholderFontSize? prependIcon? prependText? textColor? value variant?

Properties

OptionalappendIcon

appendIcon?: ReactNode

An optional icon or element to display at the end (right) of the input field.

OptionalappendText

appendText?: string

Optional text to display at the end (right) of the input field if no icon is provided.

OptionalbackgroundColor

backgroundColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

The background color of the input field. Can be a theme color or any valid CSS color.

OptionalborderColor

borderColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

The border color of the input field. Can be a theme color or any valid CSS color.

OptionalborderRadius

borderRadius?: string

The border radius of the input field. Defaults to 4 pixels.

OptionalfontSize

fontSize?: string | number

The font size of the input field text. Defaults to '0.75rem'.

Optionallabel

label?: string

The label displayed above the input field.

OptionalmaxWidth

maxWidth?: number

The maximum width of the input field. Defaults to 413 pixels.

onChange

onChange: (value: string) => void

Callback function that is called when the input value changes.

Type declaration

    • (value: string): void

    • Parameters

      • value: string

        The new input value.

      Returns void

OptionalplaceholderColor

placeholderColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

The color of the placeholder text. Can be a theme color or any valid CSS color.

OptionalplaceholderFontSize

placeholderFontSize?: string | number

Font size of the placeholder text. Defaults to '1rem'.

OptionalprependIcon

prependIcon?: ReactNode

An optional icon or element to display at the start (left) of the input field.

OptionalprependText

prependText?: string

Optional text to display at the start (left) of the input field if no icon is provided.

OptionaltextColor

textColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

The color of the input field. Can be a theme color or any valid CSS color.

value

value: string

The current value of the input field.

Optionalvariant

variant?: "filled" | "outlined" | "standard"

The variant of the input field. Can be 'filled', 'outlined', or 'standard'. Defaults to 'filled'.

Settings

Member Visibility

On This Page

Properties