# Form Controls

## Custom Validation

- 1.  You can use the `setCustomValidity` method to set a custom validation message. This will override any native validation messages.
- 2.  Set an empty string to clear the custom validity and make the input valid.
- 3.  To show the validation message, call the `reportValidity` method. Originally this would show a native validation bubble, but we show the error messages inline.

```html
<form id="validationForm" class="flex flex-col gap-2">
  <sd-radio-group id="custom-input">
    <sd-radio id="radio-1" value="1">1</sd-radio>
    <sd-radio id="radio-2" value="2">2</sd-radio>
  </sd-radio-group>
</form>
<script type="module">

  const form = document.getElementById('validationForm');
  const input = document.getElementById('custom-input');

  // Show error message
  setErrorButton.addEventListener('click', () => {
    const errorMessage = \`This is a new custom error (\${new Date().toLocaleTimeString()})\`;
    input.setCustomValidity(errorMessage);
    input.reportValidity();
  });
</script>
```