Use the `size` attribute to change the size:

- `lg`(default)
- `md`
- `sm`
  **Note:** On the `floating-label` variant “sm” size is not available.

```html
<div class="flex flex-col gap-4 max-w-[370px] h-[500px]">
  <sd-datepicker size="lg" placeholder="Large" label="Label"></sd-datepicker>
  <sd-datepicker size="md" placeholder="Medium" label="Label"></sd-datepicker>
  <sd-datepicker size="sm" placeholder="Small" label="Label"></sd-datepicker>
</div>
```