CataUiInput

A versatile input component that supports both text input and textarea, with customizable features such as labels, icons, tooltips, and action buttons.

My input label

Textarea

<!-- Basic text input with label -->
<CataUiInput type="text" label="My input label" v-model="myValue"></CataUiInput>

<!-- Required input with tooltip -->
<CataUiInput 
  required 
  type="text" 
  label="My input label" 
  tooltip="Lorem ipsum dolor sit amet, viris partiendo mel et, pro minim oratio fierent ex." 
  v-model="myValue">
</CataUiInput>

<!-- Input with icon -->
<CataUiInput 
  type="text" 
  icon="bi-search" 
  iconAlignment="left"
  placeholder="Search" 
  v-model="myValue2" />

<!-- Textarea with error message -->
<CataUiInput 
  label="Textarea" 
  error="This field has an error"
  placeholder="Enter your text here" 
  :textArea="true" 
  v-model="myValue3">
</CataUiInput>

<!-- Input with actions slot -->
<CataUiInput 
  type="text" 
  label="Input with actions" 
  v-model="myValue4">
  <template #actions>
    <CataUiButton icon="bi-x"></CataUiButton>
  </template>
</CataUiInput>

Tips

The input component works exactly like a normal <input /> element. You can add standard HTML input attributes like type (e.g., text, number, password, email), placeholder, disabled, etc.

The component can be enhanced with tooltips and action buttons using the appropriate slots and props.

Warning

For checkbox and radio inputs, please use the dedicated CataUiInputCheckbox and CataUiInputRadio components instead.

Props

Prop	Description	Type	Default	Required	Options
error	Displays an error message below the input field	String	''	false
icon	Icon name to display within the input field	String	''	false
iconAlignment	Sets the alignment of the icon within the input field	String	'left'	false	'left', 'right'
label	The text label displayed above the input	String	''	false
required	Shows a required indicator (*) next to the label	Boolean	false	false
textArea	When true, renders the input as a textarea	Boolean	false	false
tooltip	Text to display in a tooltip next to the label	String	''	false

Events

Event	Description	Parameters
update:modelValue	Emitted when the input value changes	The new input value

Slots

Slot	Description
actions	Used for adding action buttons to the input or textarea. Position varies based on the `textArea` prop
input-message	Slot for adding custom messages below the input field (after the error message if present)