IconField

IconFieldは、テーマとキーフィルタリングを備えた標準の入力要素の拡張です。

インポート#


import { IconField } from 'primereact/iconfield';
import { InputIcon } from 'primereact/inputicon';

基本#

IconFieldは、valueとonChangeプロパティを持つ制御された入力として使用されます。


<IconField iconPosition="left">
    <InputIcon className="pi pi-search"> </InputIcon>
    <InputText placeholder="Search" />
</IconField>

<IconField>
    <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
    <InputText />
</IconField>

テンプレート#

IconFieldは、valueとonChangeプロパティを持つ制御された入力として使用されます。


<IconField iconPosition="left">
    <InputIcon>
        <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g mask="url(#mask0_2642_713)">
                <path
                    fillRule="evenodd"
                    clipRule="evenodd"
                    d="..."
                    fill="var(--primary-color)"
                />
            </g>
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="..."
                fill="var(--primary-color)"
            />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
            <path d="..." fill="var(--primary-color)" />
        </svg>
    </InputIcon>
    <InputText placeholder="Search" />
</IconField>

アクセシビリティ#

スクリーンリーダー

IconFieldとInputIconには、ロールと属性は必要ありません。

キーボードサポート

コンポーネントには、インタラクティブな要素は含まれていません。