Hidden

Hidden displays a container that hides it's content.

Import

import { Hidden } from "@prismane/core";

Usage

<Button>
  Hello <Hidden>World</Hidden>
</Button>

Common Uses

The Hidden component is usually used to hide inputs in custom made input components

function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <Stack>
      <Box
        as="label"
        htmlFor="checkbox"
        px={fr(2)}
        py={fr(0.5)}
        bg="primary"
        br={2}
        cs="pointer"
      >
        Click to check
        <Hidden>
          <input
            name="checkbox"
            id="checkbox"
            type="checkbox"
            onChange={(e) => {
              setChecked(e.target.checked);
            }}
          />
        </Hidden>
      </Box>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        Checked: {checked.toString()}
      </Text>
    </Stack>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Hidden

Go BackHeader

Up NextHide