co-input

This content is not available in your language yet.

Text input field with label, helper text, icons, and clear functionality. Supports vertical and horizontal label layouts, action button, and chips.

Demo

Ver código

<co-input label="Email" placeholder="tu@email.com" icon-left="envelope"></co-input>

Prop	Atributo	Tipo	Default	Descripción
`actionIcon`	`action-icon`	`string \| undefined`	`—`	Phosphor icon name for the integrated action button
`actionLabel`	`action-label`	`string \| undefined`	`—`	Label for the integrated action button (Botón variant)
`autocomplete`	`autocomplete`	`string \| undefined`	`—`	Autocomplete hint for the browser
`clearable`	`clearable`	`boolean`	`false`	Show clear button when input has value
`disabled`	`disabled`	`boolean`	`false`	Disabled state
`helperText`	`helper-text`	`string \| undefined`	`—`	Helper text displayed below the input
`iconLeft`	`icon-left`	`string \| undefined`	`—`	Phosphor icon name for the left position
`iconRight`	`icon-right`	`string \| undefined`	`—`	Phosphor icon name for the right position
`label`	`label`	`string \| undefined`	`—`	Label text displayed above or beside the input
`layout`	`layout`	`"horizontal" \| "vertical"`	`'vertical'`	Label layout: vertical (label above) or horizontal (label beside)
`name`	`name`	`string \| undefined`	`—`	Input name attribute
`placeholder`	`placeholder`	`string`	`'Placeholder'`	Placeholder text
`readonly`	`readonly`	`boolean`	`false`	Read-only state
`required`	`required`	`boolean`	`false`	Whether the field is required
`secondaryLabel`	`secondary-label`	`string \| undefined`	`—`	Secondary label displayed on the right side
`status`	`status`	`"default" \| "error" \| "info" \| "success" \| "warning"`	`'default'`	Validation status
`type`	`type`	`string`	`'text'`	HTML input type
`value`	`value`	`string`	`''`	Current value

Evento	Detail	Bubbles	Cancelable	Descripción
`coAction`	`void`	✓	✓	Emitted when the integrated action button is clicked
`coBlur`	`void`	✓	✓	Emitted on blur
`coChange`	`string`	✓	✓	Emitted when the input loses focus
`coClear`	`void`	✓	✓	Emitted when the clear button is clicked
`coFocus`	`void`	✓	✓	Emitted on focus
`coInput`	`string`	✓	✓	Emitted when the input value changes (on input)

Slot	Descripción
`(default)`	Default slot for custom content inside the field
`action`	Slot for action button, rendered flush-right inside the field (Botón variant)
`chips`	Slot for chip/tag elements rendered before the input (Chips variant)
`suffix`	Slot for suffix content (e.g. toggle password icon) rendered after the input

Este componente no expone CSS custom properties.