How to structure this PIN code component?

Plasmic Studio Questions
1

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?

image.png
image.png1220×906 24.5 KB

image.png
image.png646×1288 35.6 KB

2

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

3

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

4

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

5

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 (
    <PlasmicSixFigureCode
      input1={{
        value: value[0], 
        onChange: e =>
          onChange(`${e.target.value}${value.substring(1)}`)
      }}
      input2={{
        value: value[1], 
        onChange: e =>
          onChange(`${value[0]}${e.target.value}${value.substring(2)}`)
      }}
      // ... 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