What I expect:

What actually shows:

The size is not the same as my expectation.

App.js

import "./styles.css";
import { HStack, PinInput, PinInputField } from "@chakra-ui/react";

export default function App() {
  return (
    <div className="App">
      <HStack>
        <PinInput type="alphanumeric">
          <PinInputField />
          <PinInputField />
          <PinInputField />
          <PinInputField />
        </PinInput>
      </HStack>
    </div>
  );
}

Codesandbox:
=/src/App.js

What I expect:

What actually shows:

The size is not the same as my expectation.

App.js

import "./styles.css";
import { HStack, PinInput, PinInputField } from "@chakra-ui/react";

export default function App() {
  return (
    <div className="App">
      <HStack>
        <PinInput type="alphanumeric">
          <PinInputField />
          <PinInputField />
          <PinInputField />
          <PinInputField />
        </PinInput>
      </HStack>
    </div>
  );
}

Codesandbox:
https://codesandbox.io/s/romantic-snowflake-km87e?file=/src/App.js

• javascript
• css
• reactjs
• chakra-ui

Share Improve this question Follow asked Feb 15, 2022 at 9:28 CCCCCCCC 6,5111010 gold badges6161 silver badges144144 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

It seems that you have forgotten the provider setup. Please make sure to read the setup in the documentation.

You should have the following code surrouding the App ponent, helping you fix the problem.

import { ChakraProvider } from '@chakra-ui/react'

<ChakraProvider>
  <App />
</ChakraProvider>