Any reason there's no Text component in the sidebar? I see that https://chakra-ui.com/text is a valid page, so not sure why it's missing.

When trying to conditionally render an element inside a Stack, I came across an exception:

<Stack>
  <Heading>Quiz question</Heading>
  {timeLimit && (
    <CircularProgress value={timeRemaining} max={timeLimit}>
      <CircularProgressLabel>{timeRemaining}</CircularProgressLabel>
    </CircularProgress>
  )}
</Stack>

If no timeLimit is given, then nothing should be rendered as the second child of the Stack, but the following error gets thrown instead:

Uncaught TypeError: Cannot read property 'type' of null
    at React$$1.cloneElement (react-hot-loader.development.js:2847)
    at index.js:38
    at mapSingleChildIntoContext (react.development.js:1232)
    at traverseAllChildrenImpl (react.development.js:1099)
    at traverseAllChildrenImpl (react.development.js:1115)
    at traverseAllChildren (react.development.js:1176)
    at mapIntoWithKeyPrefixInternal (react.development.js:1254)
    at Object.mapChildren [as map] (react.development.js:1276)
    at Stack (index.js:24)

A temporary workaround is using timeLimit ? ... : <div />, but it results in a useless empty element.

Hitting native browser back does not close the drawer.

So in the typings for the hook: useColorMode, it returns an object with two values: of course, the mode and the toggle.

However, in the actual code, it is expecting colorMode and toggleColorMode, so in the type defs the names are off. Easy fix, but TypeScript will give an error without this change so it's currently unusable.

I would be happy to put in a PR :)

How can I extend the component to get the values from the Theme?

styled-system props work correctly, but the custom aliases added by chakra do not have the correct types.

Example:

<Box rounded="full" />

Results in a type error on rounded.

I've traced down what I believe to be the problem.
See chakra-ui/src/Box/index.d.ts:

...
interface ICustomConfig {
  // Custom borderRadius alias
  rounded?: StyledSystem.BorderRadiusProps;
...

The types are exporting the StyledSystem.BorderRadiusProps directly, but BorderRadiusProps is an interface with a single key borderRadius. In order to make the types match, we need to export the type of the key:

...
interface ICustomConfig {
  // Custom borderRadius alias
  rounded?: StyledSystem.BorderRadiusProps["borderRadius"];
...

This results in a valid code for the example above. A similar process could be used to fix many of the other aliased props like shadow, w, and d.

While checkboxes and radio buttons may be disabled, they cannot be made read-only through Chakra UI. According to the HTML specification, every input type has a readonly attribute.

I would like to propose adding an isReadOnly prop to checkable input fields, as it is suitable for making forms which cannot be modified after submission.

I'm getting this error after adding it to my next.js project. I have a component in typescript Layout.tsx in which I import as follows:

import { ThemeProvider, Flex, Box } from "@chakra-ui/core";

resulting in the following error

Error: Cannot find module '@chakra-ui/core'

I also installed running the following command:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Would be nice to have a drawer that is always on screen, without overlay on the rest of the window. Something like https://material-ui.com/components/drawers/#permanent-drawer

Common use case - application wide menu.
Thanks for amazing library!

Currently, there is no definitive guide about specifying prop types of a RadioButtonGroup's children. I tried my best to come up with a solution browsing through React+TypeScript Cheatsheets, but could only make up the code snippet below, which is full of boilerplate:

import { Button } from '@chakra-ui/core';
import React from 'react';

type RadioButtonProps = React.ComponentPropsWithoutRef<typeof Button> & {
  isChecked?: boolean;
  value?: React.InputHTMLAttributes<HTMLInputElement>['value'];
};

const RadioButton = React.forwardRef(
  (
    { isChecked, isDisabled, ...restProps }: RadioButtonProps,
    ref: React.Ref<HTMLButtonElement>,
  ) => {
    return (
      <Button
        ref={ref}
        aria-checked={isChecked}
        role="radio"
        isDisabled={isDisabled}
        {...restProps}
      />
    );
  },
);

export default RadioButton;

Please consider providing better docs about types or creating an official RadioButton component with correctly specified props, as using React.forwardRef is not a convenient approach.

The dark mode doesn't persist on page refresh.

Hi, I notice that Chakra is not setting border property for buttons. Therefore, it inherits the default browser styling, which makes it quite inconsistent (Moz vs Chrome). Is there anything we can do about this?

Thank you.

Native input type=number spinners (up/down buttons) are visible and overlapping with chakra-ui implementation on <NumberInput /> component.

Tested with following browsers:
Firefox 67.0.2 (Mac)
Firefox 69.0.0 (Mac)

On chakra-ui.com/getting-started, the Getting Started text does not have proper color contrast ratio for the font size (either the font needs to be increased to 14pt or the color changed).

The Components text also fails proper color contrast for any font size.

As you can see, since the opacity animation is also being applied to the drawer, it ends up making the text overlap with the topnav while the drawer is being opened, I think we could make it so the overlay opacity doesn't apply to the drawer body, this way it'd always be solid, what are your thoughts on this?

I think it would be beneficial pull component variant css values from the theme.

For example, on Button, maybe I'd like to adjust the padding values of the different size variants. This could by just using aliases where possible instead of array values directly. As it is now, you'd have to adjust the value of a certain array scale, where as using a 'lg' alias that pointed to the key would allow for more customization. Another place I am currently doing this is with border radius. I have set the 'rounded' default prop to 'default', and added said key into the theme specification.

Alternatively, you could use styled-system variants to allow optional configuration. Thoughts?

When I look at https://chakra-ui.com/numberinput in macOS Firefox, I see some extra, smaller, controls on top of NumberInput's own controls. I'm using macOS 10.14.6 and Firefox 69.0.

Hey there 👋, great work here!

Are you planning to add a test strategy to Chakra?

I'd be glad to open a PR to add React Testing Library to cover some components.

Hey so I followed the getting started guide but when I try to use some components they just don't work. This might just be me being newish to reactjs, but for example when I create a Button it is really thin and the text flows out. When I try to do an input I get an error saying "blue is not defined" or something like that. I can provide more info if needed but does anyone know what I might be doing wrong?

On chakra-ui.com, the logo link in the header and the social media links in the footer don't have a prominent style when focused (e.g. an outline).

When I rapidly click the up/down controls of the NumberInput samples at https://chakra-ui.com/numberinput in macOS Safari, I get wide selections, i.e. light blue areas across the window. This fast clicking seems to be handled as double-clicks. I'm using macOS 10.14.6 and Safari 12.1.2.
I did not see the same effect in Chrome or Firefox.

Searching for alternatives to regular checkboxes and radio buttons, I found out that composing a Button with a Checkbox or a Radio might be a good idea.

At first, I wanted to use the as prop for the job, but it turns out that Button does not accept a value or name prop (although they are valid button attributes according to MDN). Also, the isDisabled prop only has an effect on the button's style, but not the checkbox element:

const choice = 'Answer to a quiz question';

<Button
  as={Radio}
  key={choice}
  value={choice}
  borderWidth={2}
  size="lg"
  isDisabled={selectedChoice != null}
  isFullWidth
>
  {choice}
</Button>

My second try was adding Radio as a child of Button, but that approach is semantically incorrect and makes the button's click area greater than its radio child:

const choice = 'Answer to a quiz question';

<Button variant="outline" isFullWidth>
  <Radio
    key={choice}
    value={choice}
    borderWidth={3}
    size="lg"
    isFullWidth
  >
    {choice}
  </Radio>
</Button>

I think that the first approach should be fine-tuned to work without hassle. I tried using as={props => <Radio {...props} isDisabled />} instead of as={Radio}, but it also resulted in buggy behavior.

Hi, thanks for a great project. I couldn't see a mention of the browser versions you're targetting. Obviously you need flexbox support but specifically I'm interested in whether you are looking to support IE11.

In certain cases, <Spinner /> and <Button /> or <IconButton /> with isLoading are not visible.
Here is the sandbox.

The issue is the missing borderStyle prop in <Spinner /> which should be solid by default. You can see the difference in the sandbox. For <Spinner /> it's possible to pass the prop explicitly but not in case of <Button /> and <IconButton />.

PR on the way :)

Running yarn run docs:dev correctly set up my localhost but seems like it's not hot reloaded? (According to the CONTRIBUTING guide it should.)

"docs:dev": "lerna run --scope=@chakra-ui/docs dev --stream",

It might be because of this and I feels like I've missed something that isn't mentioned in the docs.

Any pointer would be appreciated! :)

I have been enjoying use this library so far but I am unfamiliar with how to use toast. I want to be able to create a toast that has a different color and description based on the result of a function, but everytime I try I get a notification telling me I'm breaking the rules of hooks. How should I set this up? I'm sorry for the second noob question today.

Hi, amazing work you've done here! Thanks for sharing it with the community and thank you for building it with accessibility in mind! ❤️

While I was testing components, I noticed that Popover isn't accessible by default, specially because the content inside the popover isn't perceived by screen reader users when it opens. Even sighted users using only keyboard would have difficulty using it.

I think the issue is basically it not receiving focus when it opens.

Here's an accessible Popover I've built that you can use as a reference: https://reakit.io/docs/popover/

Currently, labels of Checkbox and Radio components cannot be colored. I tried applying a color prop on the parent element, but it had no effect:

const choice = 'Answer to a quiz question';

<Box color="red">
  <Radio key={choice} value={choice} color="green">
    {choice}
  </Radio>
</Box>

The text remained black, as inherited from the root html element's styles (caused by <CSSReset />).

I would like to propose that the color attribute should not have special behavior on form components, see Bootstrap Forms. As for styling checkboxes or radio buttons, I think there should be a separate iconColor prop for altering their appearance, which could be used in combination with PseudoBox props to style states other than checked.

When using the code below:

export default function Component() {
  const [selectedChoice, setSelectedChoice] = useState<string>();

  return (
    <RadioButtonGroup
      value={selectedChoice}
      onChange={value => setSelectedChoice(value)}
    >
      {/* ... */}
    </RadioButtonGroup>
  );
}

I get the following TypeScript error in strict mode:

Parameter 'value' implicitly has an 'any' type. - ts(7006)

@segunadebayo @tioluwani94 Really great work on everything so far!

I notice in the roadmap that you are planning to build a custom select component in Chakra and I wanted to start a discussion about how that would look.

In my experience for real-world projects, select boxes often need features that are not provided by the native HTML select such as search, multi-select, and dynamic option loading. I frequently turn to the react-select package because I feel it has the best API and available features. How do you see Chakra handling this problem, if at all? I see a few options:

• Chakra provides a simplistic select that doesn't have these "fancy" features and it is the responsibility of the end-developer to use a third party library if necessary
• Chakra writes its own select that does implement these features
• Chakra wraps an existing library like react-select

I am in favor of options 1 and/or 3 and would like to hear the community's opinions about the pros/cons of each.

Side note: This issue is also going to apply to other "complex" components such as date pickers

When testing the drawer example, after copy and paste from the docs in a new create-react-app app

https://codesandbox.io/s/morning-fire-yjoi9

I see this kind of unrelated warnings.

    import "@reach/dialog/styles.css";

  Otherwise you'll need to include them some other way:

    <link rel="stylesheet" type="text/css" href="node_modules/@reach/dialog/styles.css" />

  For more information visit https://ui.reach.tech/styling.
   
    in Component (created by Anonymous)
    in Anonymous (created by Context.Consumer)
    in Context.Consumer (created by Context.Consumer)
    in Context.Consumer (created by Styled(Component))
    in Styled(Component) (created by Anonymous)
    in Anonymous (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by Anonymous)
    in Anonymous (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in App (at src/​index.js:7)
r @ backend.js:1
checkStyles @ index.js:12
checkDialogStyles @ index.js:72
componentDidMount @ index.js:93
commitLifeCycles @ react-dom.development.js:21142
commitLayoutEffects @ react-dom.development.js:24138
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
commitRootImpl @ react-dom.development.js:23903
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
commitRoot @ react-dom.development.js:23723
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `zIndex` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `zindex` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Component)
    in div (created by RemoveScroll)
    in RemoveScroll (created by Component)
    in div (created by FocusLock)
    in FocusLock (created by Component)
    in Component (created by ForwardRef)
    in Component (created by Portal)
    in Portal (created by ForwardRef)
    in Component (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by ForwardRef)
    in ForwardRef (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in header (at App.js:104)
    in div (at App.js:103)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (at App.js:102)
    in App (at src/index.js:7)
console.<computed> @ index.js:1375
r @ backend.js:1
warningWithoutStack @ react-dom.development.js:563
warning @ react-dom.development.js:2965
validateProperty$1 @ react-dom.development.js:8849
warnUnknownProperties @ react-dom.development.js:8892
validateProperties$2 @ react-dom.development.js:8915
validatePropertiesInDevelopment @ react-dom.development.js:8960
setInitialProperties @ react-dom.development.js:9236
finalizeInitialChildren @ react-dom.development.js:10437
completeWork @ react-dom.development.js:20078
completeUnitOfWork @ react-dom.development.js:23540
performUnitOfWork @ react-dom.development.js:23513
workLoopSync @ react-dom.development.js:23480
renderRoot @ react-dom.development.js:23155
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `overflowY` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `overflowy` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Component)
    in div (created by RemoveScroll)
    in RemoveScroll (created by Component)
    in div (created by FocusLock)
    in FocusLock (created by Component)
    in Component (created by ForwardRef)
    in Component (created by Portal)
    in Portal (created by ForwardRef)
    in Component (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by ForwardRef)
    in ForwardRef (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in header (at App.js:104)
    in div (at App.js:103)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (at App.js:102)
    in App (at src/index.js:7)````

WICG has started a project called Open UI, which aims to standardize UI components for the web. I think that Chakra UI fits the purpose well and should consider contributing design system details towards the initiative.

The number input displays the built-in stepper in Firefox.

Can be fixed with -moz-appearance: textfield;.

Editable

• Using with keyboard navigation, the text becomes editable when tabbing to it and saved when tabbing away from it. This is very different experience from a mouse user who would have to explicitly make the text editable and has a chance to cancel or save after changing the text.
• Using keyboard to navigate, it seems like focus gets trapped in the text field. When I try to tab past other components in Storybook, I'm able to get past the component and into the bottom area (e.g. knobs, actions). However on this page, tabbing keeps switching the text between editable and not editable.
• Design-wise, I'm not sure if it's clear enough that the text has become editable since it looks like non-editable text rather than text in a form field, for example.

Hi there! Really impressive work! 🙌

One thing I noticed when navigating the chakra-ui.com website using my keyboard is that once the code editor ("editable example") gets focus, it seems impossible to get out with the cursor. This is because the editor recognises the "tab" key as a way to change the indentation. It would be nice to escape this keyboard trap somehow.

A suggestion would be to allow the "escape" key to move the focus out of the "edit" mode (suggested by slugolicious here). The spec might be helpful: https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html

I created a sandbox with the defect https://codesandbox.io/s/chakra-ui-sandbox-9e5v4
Note that the menu popper gets cut off when component is far right.

Loving the library! 😃

I followed the docs, and trying Accordion example. But i got the error

node_modules/@chakra-ui/core/dist"' has no exported member 'AccordionIcon

The code is

import {
  Box,
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionPanel,
  AccordionIcon
} from "@chakra-ui/core";

Am i missing anything here ?

Thanks you for great library.

When using chakra-ui and styled-components the theme prop is not passed into the styled-component

Reproduction CodeSandbox below
https://codesandbox.io/s/modest-bogdan-fnc0q

I can't change the value when using iOS

I observed that the color style is only applied if a space comes before the value

Hey there

Amazing library, seriously nice 👏

Wondering if there are plans to write type definitions for it?

Thanks

Nice job and I'm ready to adopt this in my future project.
I tried to make a navigation bar but it was not easy at all. if you can make a component for that. or do a little tutorial on how we can do this.

By specifying the font-variant-numeric: tabular-nums CSS rule, janky changes can be evaded.

Reproduction

Change '41%' to '42%' in the code below:

<CircularProgress value={41} color="green">
  <CircularProgressLabel fontFamily="Comic Sans MS">41%</CircularProgressLabel>
</CircularProgress>

Checkboxes and radio buttons have a lot of states heavily depending on CSS pseudo selectors. As suggested in #46, using PseudoBox to style form controls would open up new possibilities like using different icon colors for active and inactive states of a checkbox.

Also, the button-like behavior described by #45 could be achieved by code similar to below:

const choice = 'Answer to a quiz question';

<Radio
  key={choice}
  value={choice}
  isDisabled={selectedChoice != null}
  isFullWidth
  px={3}
  py={2}
  bg={color}
  borderWidth={1}
  _hover={{
    // This is the important part
    // ...
  }}
>
  {choice}
</Radio>

Hello,

I tried using the CircularProgress component but got an error when importing from @chakra-ui/core. It only worked now with import like this:
import CircularProgress, {
CircularProgressLabel
} from "@chakra-ui/core/dist/CircularProgress";

PS: Thanks for perfect ui lib ;)

form control
input

There's a lot of reasons why we shouldn't use placeholder text in form fields:
https://www.smashingmagazine.com/2018/06/placeholder-attribute/

Progress and CircularProgesss components are ideal for denoting the passage of time. However, they do not support time-based value animations yet. While it is possible to combine a state variable (useState) with a timer (setTimeout or requestAnimationFrame), JavaScript animations are not as smooth as the ones made with CSS, as the latter can be GPU-accelerated.

I propose adding an AnimatedValueProvider based on the React Context API, with syntax similar to below, inspired by the animation CSS property:

<AnimatedValueProvider duration="30s">
  <CircularProgress />
</AnimatedValueProvider>

Only the duration prop should be mandatory, and the following could also be configured:

• timingFunction (override browser default value to be linear, as it fits the use-case better)
• delay
• iterationCount
• direction

The implementation could reuse the logic behind an indeterminate CircularProgress component, depending on the useContext hook to retrieve parameters from AnimatedValueProvider:

• If no provider is detected or the given duration is nullish, then leave the behavior of child components intact.
• The provider shall not override a value explicitly given to a child.
• min and max values given to a progress component should be respected by AnimatedValueProvider readings.

When creating a button wider than its contents (e.g. with its uncodumented isFullWidth prop or width="100%"), the textAlign="left" does nothing. I tried playing around with left and right paddings, but with no luck.

Example

<Button isFullWidth textAlign="left">
  I'm a full width button with text aligned to the left
</Button>

Current appearance

Expected appearance

Use-case

When a group of buttons contain check boxes or radios, one may want to align them together.

version: 0.2.6

I'm submitting an issue

Current behavior: I do have an issue using the Toastr at a specific position. for example, setting the Toastr position for bottom-left works fine. other values break like top-end.

I tried using number | undefined type values with RadioGroup:

const [selectedChoiceID, setSelectedChoiceID] = useState<number>();
return (
  <RadioGroup
    value={selectedChoiceID}
    onChange={event => {
      // Input values are stored as strings under the hood
      // Thus, a conversion back to number is necessary
      const choiceID = Number(event.target.value);
      setSelectedChoiceID(choiceID);
    }}
    spacing={0}
  >
    <Radio value={1}>A</Radio>
    <Radio value={2}>B</Radio>
    <Radio value={3}>C</Radio>
  </RadioGroup>
);

Unfortunately, as value attributes are stored as strings under the hood, the code above does not work: None of the radio buttons can be checked. However, if I explicitly convert selectedChoiceID to string with the value={String(selectedChoiceID)} syntax, the example above works flawlessly.

I would suggest explicitly asking for string values in TypeScript, as input field attributes are stored as strings under the hood (see the conversion necessary in the onChange callback).