How to make cursor blinking on the focus input?

[broodfusion]

As title suggests, thanks

[andreaswilli]

Depends on what you mean by "blinking cursor":

• If you mean a native cursor: This is not possible since the visible part of the component is not acutally an input element.
• If you mean the selected field indicator: You can make it blink using a css animation like so:

.character--selected {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    outline: orange 3px solid;
  }
  50% {
    outline: orange 3px solid;
  }
  51% {
    outline: none;
  }
  100% {
    outline: none;
  }
}

[broodfusion]

Thanks I've figured it out using a similar solution

[giopetris]

@broodfusion were you able to make this look like a real cursor?

[andreaswilli]

I added a complete example to the docs.

[billsbooth]

The example doesn't properly align the baseline of the character and the blinker...

[andreaswilli]

It's an example to use as a starting point.
Feel free to adapt the values, as they depend on the concrete typeface, etc.
That's also why this is not built into the library.