IconPickerField

IconPickerField shows the currently selected icon in an 80×80 tile. When no icon is selected it renders a dashed placeholder with a "tap to select" prompt. Clicking the tile opens the IconPickerModal in full-screen mode. Clicking the selected icon clears the value (calls onChange with no argument).

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Name of the currently selected icon (as used by the Icon component). | | onChange | (optionName?: string) => void | Yes | — | Called with the icon name when selected, or with no argument to clear. | | label | string | No | — | Label rendered above the field. | | description | string | No | — | Helper text rendered below the field. | | onlyTypes | string[] | No | — | Filter the picker to show only specific icon types (e.g. ['singleColor', 'multiColor']). | | onlyWith | string[] | No | — | Filter the picker to show only icons that include specific tags (e.g. ['wrapper', 'inverted']). | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer FieldContainer. | | headerStyle | React.CSSProperties | No | — | Styles applied to the field header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the field body area. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container. |

Usage

Basic

import React, { useState } from 'react';
import IconPickerField from '@/components/fields/IconPickerField';

export default function Example() {
  const [icon, setIcon] = useState('');

  return (
    <IconPickerField
      label="Action icon"
      value={icon}
      onChange={(name) => setIcon(name ?? '')}
    />
  );
}

Filtered to single-color icons only

<IconPickerField
  label="Category icon"
  value={icon}
  onChange={(name) => setIcon(name ?? '')}
  onlyTypes={['singleColor']}
  description="Only single-color icons are available."
/>