NativeDateField

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

<NativeDateField name="date" />

function Demo() {
  const [value, setValue] = useState("");

  return (
    <NativeDateField
      name="date"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

<NativeDateField name="date" icon={<GearSix />} />

<NativeDateField
  name="date"
  addons={<Field.Addon position="left">Date</Field.Addon>}
/>

function Demo() {
  const [date, setDate] = useState("");

  return (
    <>
      <NativeDateField
        variant="outlined"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <NativeDateField
        variant="filled"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <NativeDateField
        variant="underlined"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <NativeDateField
        variant="unstyled"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
    </>
  );
}

function Demo() {
  const [date, setDate] = useState("");

  return (
    <Flex direction="column" gap={fr(2)}>
      <NativeDateField
        size="xs"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <NativeDateField
        size="sm"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <NativeDateField
        size="base"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <NativeDateField
        size="md"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <NativeDateField
        size="lg"
        placeholder="Default Field"
        label="Default Field:"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
    </Flex>
  );
}