PinInput ChakraUI v3 - Component React gap cannot change

I'm using Chakra UI v3's PinInput component and need to eliminate the gaps between individual input fields. I've tried several approaches but none seem to work:

What I've tried:

  gap={0}
  sx={{
    '& > *': {
      marginRight: '-2px !important',
      borderRightWidth: '0px !important'
    },
    '& > *:last-child': {
      marginRight: '0px !important',
      borderRightWidth: '1px !important'
    }
  }}
>
  <PinInput.Input index={0} />
  <PinInput.Input index={1} />
  <PinInput.Input index={2} />
  <PinInput.Input index={3} />
  <PinInput.Input index={4} />
  <PinInput.Input index={5} />
</PinInput.Root>

Current behavior: There are still visible gaps between the 6 input fields, even with gap={0} and negative margins. Expected behavior: All 6 fields should be adjacent with no visible gaps, creating a seamless input appearance.

Environment: Chakra UI v3 React 18 TypeScript

Question: How can I completely eliminate the gaps between PinInput fields in Chakra UI v3? Are there specific CSS properties or alternative approaches I should use?

Solution

Use the attached prop can solve your problem. It will remove the gaps and join the input.

<PinInput.Root attached>
  <PinInput.HiddenInput />
  <PinInput.Control>
    <PinInput.Input index={0} />
  </PinInput.Control>
</PinInput.Root>

If attached prop doesn't work for you, apply gap={0} directly to PinInput.Control

<PinInput.Root>
  <PinInput.HiddenInput />
  <PinInput.Control gap={0}>
    <PinInput.Input index={0} />
....
  </PinInput.Control>
</PinInput.Root>

you can also use sx or css to override style.

sx={{
    "& > *": {
      marginRight: "-1px !important", // make it -1
      borderRadius: 0, // remove rounded borders
    },
    "& > *:first-of-type": {
      borderTopLeftRadius: "md", // restore radius for first input
      borderBottomLeftRadius: "md",
    },
    "& > *:last-of-type": {
      borderTopRightRadius: "md", // restore radius for last input
      borderBottomRightRadius: "md",
      marginRight: "0 !important",
    },
  }}