Components / Input controls

Icon Input

Component + manager

Lets users pick an icon (and optionally its color), displaying a searchable list of available icons.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentIconInput

Managercreate_icon_input_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { IconInput, create_icon_input_manager } from "sveltekit-ui"

  const manager = create_icon_input_manager({
    is_icon_only: true,
    val: "star",
    icon_options: [
      { key: "star", name: "Star" },
      { key: "check", name: "Check" },
      { key: "heart", name: "Heart" },
    ],
  })
</script>

<IconInput {manager} />
<p>Selected icon: {manager.val}</p>

API reference

Configure the manager, call its methods, and read its reactive state.

5 entries in configuration

Property	Type	Default	Description
`val`	`any`	`null`	if is_icon_only is true, val is simply the icon key (string). otherwise val is an object { icon, color }
`is_icon_only`	`boolean`	`false`	if true, the value is just a string representing the icon key; color is ignored
`icon_options`	`array`	`a built-in list of sample icons if not provided`	array of { key, name } objects describing available icons
`on_finish`	`function`	`null`	callback triggered on 'finish'; receives the final val
`is_button_compressed`	`boolean`	`true`	makes the toggle button narrower if true