How to structure this PIN code component?

Quick question: I have an element where users input a 6-figure code to log in to a dashboard. What would be the best way set this up in Plasmic? Does my approach make sense?

It makes sense to have 6 input boxes, but not sure if they should be in the children slot though… instead, maybe what you want is to expose the value for each box as a prop for your component? If so, you can select each input box, right-click on the value attribute on the right panel, and select “link to component prop”. That way, when you are using an instance of SixFigureCode, you can specify what each figure’s value is by specifying the six props

Thanks Chung! I didn’t know that was possible. Very cool, I’ll do it like that

How would my dev add an onChange event listener? Can I expose this in Plasmic?

Hmm, if you’d like an onChange listener that fires with the updated 6-digit code, you can do this in code…

function SixFigureCode(props: { 
  value: string;
  onChange: (val: string) => void 
}) {
  const {value, onChange} = props;
  return (
        value: value[0], 
        onChange: e =>
        value: value[1], 
        onChange: e =>
      // ... etc

So we have individual listeners for individual inputs, and when an individual input changes, we fire a new change event with a new character from that input