# MUK INPUT

## Usage

```html

<lib-muk-radio-button
  [controller]="controller"
  [label]="label"
  [className]="className"
  [optionsList]="optionsList"
  [isRequired]="isRequired"
  [isDisabled]="isDisabled"
  [isToggle]="isToggle"
  (inputValueChanged)="onInputValueChanged($event)"
></lib-muk-radio-button>
```

```typescript
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  controller = new FormControl();
  label = 'Label';
  className = 'class';
   optionsList:IRadioButton[]= [
          {
            key: 'low',
            value: 'Low',
            class:'sub__info__status'
          },
          {
            key: 'low',
            value: 'Hight',
            class:'orange__status'
          },
          {
            key: 'critical',
            value: 'Critical',
            class:'danger__status'
          },
          {
            key: 'medium',
            value: 'Medium',
            class:'sub__primary__status'
          },
        ],
  isRequired = true;
  isDisabled = false;
  isToggle = false;


  onInputValueChanged(event: InputValueChanged) {
    console.log(event);
  }
}
```

### Properties

| Name        | Type           | Description                              |
|-------------|----------------|------------------------------------------|
| controller  | FormControl    | The form control associated to the input |
| label       | string         | The label of the input                   |
| className   | string         | The class name of the input              |
| optionsList | IRadioButton[] | The list of options                      |
| isRequired  | boolean        | Whether the input is required            |
| isDisabled  | boolean        | Whether the input is disabled            |
| isToggle    | boolean        | Whether the radio-button is radio-group or button-toggle-group  |

### Events

| Name              | Type              | Description                                                                                                                                                                                                                                     |
|-------------------|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| inputValueChanged | InputValueChanged | Event emitted when the value of the input changes. The event contains the new value of the input and the form control associated to the input. The form control is the same as the one passed as input to the component. The value is a string. |