Bauhaus Design System

Input ​

Molecule

The Input component is a single-line form field for short text or numeric values. Use type="text" (default) for names and similar entries, and type="number" when a unit and numeric stepping are required. Text fields can show optional leading or trailing icons; number fields show a unit instead. Values that exceed the field width are truncated with an ellipsis.

Playground 

        
          

            <
            Input

            






            

                type
              
                =
                "text"
              


                label
              
                =
                "Label"
              


                placeholder
              
                =
                "Placeholder"
              


                validation
              
                =
                "info"
              


                tooltipPosition
              
                =
                "top-center"
              


                helpText
              
                =
                "This is a help text"
              


                maxLength
              


                step
              
                =
                "0.01"
              


                fractionDigits
              
                =
                "2"
              


                range
              
                =
                "[
  0,
  150
]"
              


                useHelpTextIcon
              





  />

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

ts
const [modelValue, modifiers] = defineModel<string | number | null>('modelValue', {
  required: true,
  set: (value) => {
    return applyBuiltInModelModifiers(value, modifiers);
  }
});

Properties ​

ts
export type InputProps =
  & Omit<FormLabelOptionalProps, 'labelPosition' | 'clickableLabel'>
  & {
    type?: InputType;
    placeholder?: string;
    icon?: IconName;
    iconRight?: boolean;
    searchable?: boolean;
    /** @deprecated Use `searchable`. */
    deleteButton?: boolean;
    validation?: HelpTextProps['category'];
    maxLength?: number;
    helpTextMaxLength?: string;
    fractionDigits?: number;
    step?: number;
    unit?: Unit | string;
    range?: [number | null, number | null];
  };

Anatomy ​

  1. Container - clickable area that enables and contains the user’s input.
  2. Form Label - nested FormLabel. Tells the user what they are entering and indicates if the field is required. Can be hidden.
  3. Icons - optional leading and/or trailing nested Icon. A leading icon hints at the input type. A trailing icon communicates an action. Number type does not show icons.
  4. Help Text - optional nested HelpText. Additional guidance, up to two lines. When a validation state is set, Help Text is used as feedback (valid or invalid) with the matching icon and color.
  5. Input value - placeholder until the user types. Do not put critical information in the placeholder; use the label or help text. Overflow is truncated with an ellipsis; the field does not grow or wrap.
  6. Unit (number type) - unit suffix inside the field (for example cm, kN/m²) from the unit prop or #unit slot. Uses placeholder color when the field is empty, and error-red when invalid.


States
  • Input includes Default, Hover, Focus, Focus Visible, and Locked states.
  • Focus is triggered by a mouse click.
  • Focus Visible is triggered when the user navigates to the field using the Tab key.
  • In both the Focus and Focus Visible states, a text caret appears to indicate that the user can enter a value.
  • The Invalid validation state can only have Default and Hover states. When the user clicks on an Invalid Input, the validation is cleared and the component transitions to the Focus state. Pressing Tab instead transitions it to the Focus Visible state.
  • The Validated validation state can only have Default and Hover states and applies only when the field contains user input. When the user clicks on a Validated Input, the validation is cleared and the component transitions to the Focus state. Pressing Tab instead transitions it to the Focus Visible state.
Variants
Type
  • Text — expected input is text. Can be used with leading or trailing icons.
  • Number — expected input is a number. Units are shown. Icons cannot be shown.
Searchable
  • Available only for the Text type. When enabled, the trailing icon is replaced with an Icon Button that allows the user to clear the input field and reset the interface.
  • The Searchable option is only active when the field contains user input (Text=Input), as a search field without typed content does not apply.
FormLabel
  • Show or hide Form Label.
  • Toggle Required.
Text
  • Placeholder — sample to prompt user.
  • Input — user generated.
Icons
  • Leading, Trailing or None.
  • A leading Icon hints at the input type. A trailing Icon communicates an action (for example a magnifier). Number type does not show icons.
Help Text + Validation
  • Show or hide Help Text.
  • The Input supports three validation states: None, Invalid, and Validated. When validation is applied, the Help Text communicates the current validation result.
  • The Validated state is only available when the field contains user input, as an empty placeholder field cannot be positively validated.
  • If the Input has informational Help Text and a validation state is triggered, the validation message replaces the original informational message. Validation feedback always takes priority over informational Help Text.
  • Depending on the use case, validation may be triggered after the user submits the form or moves focus away from the Input after editing its value.

Developer notes ​

  • type="text" uses a string model. type="number" uses number | null.
  • TextInput and NumberInput remain compatibility wrappers around Input (type="text" / type="number"). Prefer Input in new code.
  • searchable is text-only (default true). Empty fields show no trailing control; with a value, a clear IconButton replaces the trailing icon. Number type ignores searchable.
  • deleteButton still works as an alias of searchable. Prefer searchable.
  • Number type ignores icons. Arrow keys change the value while focused:
    • Arrow up / Arrow down: 1 * step
    • Ctrl + Arrow *: 10 * step
    • Ctrl + Shift + Arrow *: 100 * step
  • Values outside range or with more than fractionDigits decimal places show invalid Help Text. maxLength does the same for text.
vue
<script setup>
import { ref } from 'vue';
import { Input } from '@pohlcon/design-system';

const name = ref('');
const query = ref('');
const length = ref<number | null>(null);
</script>

<template>
  <Input
    v-model="name"
    label="Your Name"
    placeholder="Dennis Neumann-Börtz"
    helpText="Please enter your full name."
  />
  <Input
    v-model="query"
    label="Search"
    placeholder="Type here..."
    searchable
  />
  <Input
    v-model="length"
    type="number"
    label="Length"
    unit="cm"
    helpText="The value should be max. 100 cm"
    :range="[0, 100]"
  />
</template>