# Date Picker

Pick a date or a range from a calendar; values are ISO strings.

Group: Forms

## Import

```tsx
import { DatePickerField } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function DatePickerDemo() {
  const [d, setD] = useState<string[]>([])
  return (
    <Stack gap="4">
      <DatePickerField label="Tanggal lahir" value={d} onValueChange={setD} />
      <DatePickerField label="Menginap" mode="range" />
      <Text fontSize="xs" color="fg.muted">
        Nilai: {d.join(", ") || "-"}
      </Text>
    </Stack>
  )
}
```

## Props

### DateInputField

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `range` | `boolean` |  |  |

`*` = required. Style props and HTML attributes are accepted too.