# FlexiDelete

> A dropzone that deletes any widget dropped on it.

Source: https://www.flexiboards.dev/docs/components/deleter

Framework: Svelte

## FlexiDelete (component)

**Props**

| Name | Type | Description |
| --- | --- | --- |
| `controller` (bindable) | `FlexiDeleteController \| undefined` | Optional. The controller managing this component's state and behaviour. Bind to it to access the component's imperative API. |
| `onfirstcreate` | `((instance: FlexiDeleteController) => void) \| undefined` | Optional. Fires when the component's controller is first created. |
| `class` | `(ClassValue \| ((deleter: FlexiDeleteController) => ClassValue))` | Optional. The class names to apply to the deleter's container element. Either a class value, or a function deriving one from the deleter's state. |
| `children` | `Snippet<[{ deleter: FlexiDeleteController }]>` | Optional. The content rendered inside of the deleter. |

`FlexiDelete` renders a dropzone inside your board; any widget dropped on it is deleted. Its controller's `isHovered` property lets you highlight it while a widget is held over it.

```svelte
<script lang="ts">
	import { FlexiDelete } from '@flexiboards/svelte';
</script>

<FlexiDelete
	class={(deleter) => [
		'rounded-lg border border-dashed p-4',
		deleter.isHovered && 'border-red-500 text-red-500'
	]}
>
	Drag a widget here to delete it
</FlexiDelete>
```

## FlexiDeleteController

You can access the controller via binding to the `controller` prop, using the `onfirstcreate` callback, or from the `children` snippet parameter.

Use the `FlexiDeleteController` to read the deleter's state.

**Properties**

| Name | Type | Description |
| --- | --- | --- |
| `ref` | `HTMLElement \| undefined` | The DOM element bound to this deleter. |
| `isHovered` (readonly) | `boolean` | Whether the deleter is currently being hovered by the pointer. Prefer this over CSS hover, because it accounts for Flexiboards' keyboard-based pointer. |

## Accessibility

`FlexiDelete` renders a `role="region"` described by the board's instructions element. Nothing inside it needs to be focusable, but it should contain a text label, or a visually hidden `span` when the content is an icon, so screen readers can name the dropzone. See [Accessibility](https://www.flexiboards.dev/docs/accessibility).