> ## Documentation Index > Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Input wrapper Blade component export const EditOnGitHub = ({version, path}) => { const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`; return

; }; export const Footer = () => { const sponsorsByTier = JSON.parse(`{ "agency_partner": [ { "name": "Kirschbaum", "url": "https://kirschbaumdevelopment.com/solutions/filament-development", "filename": "kirschbaum.svg" } ], "gold": [ { "name": "Agiledrop", "url": "https://www.agiledrop.com/laravel?utm_source=filament", "filename": "agiledrop.svg" }, { "name": "Baiz.ai", "url": "https://baiz.ai", "filename": "baiz-ai.svg" }, { "name": "CMS Max", "url": "https://cmsmax.com?ref=filamentphp.com", "filename": "cms-max.svg" }, { "name": "Mailtrap", "url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament", "filename": "mailtrap.svg" }, { "name": "SerpApi", "url": "https://serpapi.com/?utm_source=filamentphp", "filename": "serpapi.svg" } ] }`); function shuffleArray(items) { const result = [...items]; for (let index = result.length - 1; index > 0; index--) { const randomIndex = Math.floor(Math.random() * (index + 1)); [result[index], result[randomIndex]] = [result[randomIndex], result[index]]; } return result; } const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors)); return

Sponsored by

{sponsors.map(sponsor =>

)} Your logo here

; }; You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament. Looking for the current stable version? Visit the [5.x documentation](/5.x). ## Overview The input wrapper component should be used as a wrapper around the [input](./input) or [select](./select) components. It provides a border and other elements such as a prefix or suffix. ```blade theme={"theme":"gruvbox-dark-hard"}

``` ## Triggering the error state of the input The component has special styling that you can use if it is invalid. To trigger this styling, you can use either Blade or Alpine.js. To trigger the error state using Blade, you can pass the `valid` attribute to the component, which contains either true or false based on if the input is valid or not: ```blade theme={"theme":"gruvbox-dark-hard"}

``` Alternatively, you can use an Alpine.js expression to trigger the error state, based on if it evaluates to `true` or `false`: ```blade theme={"theme":"gruvbox-dark-hard"}

``` ## Disabling the input To disable the input, you must also pass the `disabled` attribute to the wrapper component: ```blade theme={"theme":"gruvbox-dark-hard"}

``` ## Adding affix text aside the input You may place text before and after the input using the `prefix` and `suffix` slots: ```blade theme={"theme":"gruvbox-dark-hard"}

https://

.com

``` ### Using icons as affixes You may place an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) before and after the input using the `prefix-icon` and `suffix-icon` attributes: ```blade theme={"theme":"gruvbox-dark-hard"}

``` #### Setting the affix icon's color Affix icons are gray by default, but you may set a different color using the `prefix-icon-color` and `affix-icon-color` attributes: ```blade theme={"theme":"gruvbox-dark-hard"}

```