# Time Period

[component-header:sl-time-period]

Input for selecting start and end time of day.

```html preview
<sl-time-period></sl-time-period>
```

## Sizes


```html preview
<sl-grid sl-gap="3">
    <sl-time-period size="small"></sl-time-period>
    <sl-time-period size="medium"></sl-time-period>
    <sl-time-period size="large"></sl-time-period>
</sl-grid>
```

## Label

```html preview
<sl-time-period label="Select period"></sl-time-period>
```

## Help text

```html preview
<sl-grid sl-gap="3">
    <sl-time-period label="Select period" help-text="This is a period within a day."></sl-time-period>
    <sl-time-period label="Select period">
        <span slot="help-text">This is a period within a day. 🙌🏻</span>
    </sl-time-period>
</sl-grid>
```

## Error text

```html preview
<sl-grid sl-gap="3">
    <sl-time-period label="Select period" error-text="This is an invalid period."></sl-time-period>
    <sl-time-period label="Select period">
        <span slot="error-text">This is an invalid period. 🤯</span>
    </sl-time-period>
</sl-grid>
```
[component-metadata:sl-time-period]