# Format Bytes

[component-header:sl-format-rrule]

Formats a recurrence rule as a human readable reccurence.

```html preview
<div class="format-rrule-overview">
  The rule reccurence is <sl-format-rrule value="FREQ=MONTHLY"></sl-format-rrule>.
  <br><br>
  <sl-input value="FREQ=MONTHLY" label="Rule to Format" style="max-width: 300px;"></sl-input>  
</div>

<script>
  const container = document.querySelector('.format-rrule-overview');
  const formatter = container.querySelector('sl-format-rrule');
  const input = container.querySelector('sl-input');

  input.addEventListener('slInput', () => {
    const rule = input.value || '';
    console.log('Rule updated: ', rule);
    formatter.value = rule;
  });
</script>
```

## Examples

### Formatting Rules

Set the `value` attribute to a number to get the value in bytes.

```html preview
<sl-format-rrule value="FREQ=WEEKLY"></sl-format-rrule><br>
<sl-format-rrule value="FREQ=MONTHLY"></sl-format-rrule><br>
<sl-format-rrule value="FREQ=YEARLY"></sl-format-rrule><br>
<sl-format-rrule value="FREQ=MONTHLY;BYMONTHDAY=10,20"></sl-format-rrule><br>
<sl-format-rrule value="FREQ=WEEKLY;BYDAY=TU,TH"></sl-format-rrule><br>
<sl-format-rrule value="FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"></sl-format-rrule><br>
<sl-format-rrule value="FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR,SA,SU"></sl-format-rrule>
```


[component-metadata:sl-format-rrule]