Components / Foundations

Eye

Component

Interactive eye icon for toggling visibility, such as showing or hiding passwords. Supports customization of color and stroke width, and optional state binding.

Preview

Usage

API reference

Live preview

Interactive example

Visibility toggle

Content is hidden

Click the eye to change the visibility state.

Usage

Import the component, then make it your own.

ComponentEye

svelte

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

  let is_visible = $state(false)
</script>

<Eye is_eye_shown={is_visible} on_change={(value) => { is_visible = value }} />
<p>{is_visible ? "The preview is visible." : "The preview is hidden."}</p>

API reference

Props accepted by the component.

5 entries in properties

Property	Type	Default	Description
`is_eye_shown`	`boolean`	`false`	Determines whether the eye icon is shown (visible) or the eye_not icon.
`is_bind_val`	`boolean`	`false`	If true, toggles the internal state `is_eye_shown` when clicked.
`eye_color`	`CSS color`	`var(--g6-t)`	Color of the eye icon.
`sw`	`number`	`30`	Stroke width of the eye icon lines.
`on_change`	`function`	`null`	Callback function triggered when the eye icon is toggled. Receives the new `is_eye_shown` state as an argument.