输入包装组件应作为 input 或 select 组件的包装使用。它提供一个边框以及其他元素，例如前缀或后缀。
<x-filament::input.wrapper>
<x-filament::input
type="text"
wire:model="name"
/>
</x-filament::input.wrapper>
<x-filament::input.wrapper>
<x-filament::input.select wire:model="status">
<option value="draft">Draft</option>
<option value="reviewing">Reviewing</option>
<option value="published">Published</option>
</x-filament::input.select>
</x-filament::input.wrapper>该组件具有特殊样式，你可以在它无效时使用。要触发此样式，你可以使用 Blade 或 Alpine.js。
要使用 Blade 触发错误状态，你可以向组件传递 valid 属性，该属性包含 true 或 false，具体取决于输入是否有效：
<x-filament::input.wrapper :valid="! $errors->has('name')">
<x-filament::input
type="text"
wire:model="name"
/>
</x-filament::input.wrapper>或者，您可以使用 Alpine.js 表达式来触发错误状态，取决于它求值结果是 true 还是 false：
<div x-data="{ errors: ['name'] }">
<x-filament::input.wrapper alpine-valid="! errors.includes('name')">
<x-filament::input
type="text"
wire:model="name"
/>
</x-filament::input.wrapper>
</div>要禁用输入，您还必须将 disabled 属性传递给包装器组件：
<x-filament::input.wrapper disabled>
<x-filament::input
type="text"
wire:model="name"
disabled
/>
</x-filament::input.wrapper>你可以在输入框前后放置文本，使用 prefix 和 suffix 插槽：
<x-filament::input.wrapper>
<x-slot name="prefix">
https://
</x-slot>
<x-filament::input
type="text"
wire:model="domain"
/>
<x-slot name="suffix">
.com
</x-slot>
</x-filament::input.wrapper>您可以放置一个 图标 在输入的前面和后面 使用 prefix-icon 和 suffix-icon 属性：
<x-filament::input.wrapper suffix-icon="heroicon-m-globe-alt">
<x-filament::input
type="url"
wire:model="domain"
/>
</x-filament::input.wrapper>后缀图标默认情况下为灰色，但您可以使用 prefix-icon-color 和 affix-icon-color 属性设置不同的颜色：
<x-filament::input.wrapper
suffix-icon="heroicon-m-check-circle"
suffix-icon-color="success"
>
<x-filament::input
type="url"
wire:model="domain"
/>
</x-filament::input.wrapper>