Skip to content

Date Range Picker

The Date Range Picker allows users to select a start and end date range.

Basic Usage

-

import { Daterange } from "@paramanu/forms-react"

export default function App() {
  return <Daterange />
}

<div class="pm-daterange pm-daterange--outline pm-daterange--md">
  <input type="text" placeholder="Start date" />
  <span> - </span>
  <input type="text" placeholder="End date" />
</div>

Props

Prop	Type	Default	Description
`variant`	`"outline" \| "filled" \| "unstyled"`	`"outline"`	Visual variant
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Size
`invalid`	`boolean`	`false`	Invalid state
`disabled`	`boolean`	`false`	Disabled state
`open`	`boolean`	`false`	Open state