RadioInput
Basic
Let's say you want to create a simple textinput. So let's take an example how you do it, check it out below.
create a file at app/user/page.tsx
app/user/page.tsx
<AFormInput
name={"radioinput"}
labelPosition={"prefix"}
inline={false}
options={[
{ text: "Hindi", value: '1' },
{ text: "English", value: '2' },
]}
onChange={(value: string) => void}
onBlur={() => setcheckBox([])}
defaultValue={'2'}
disabled={false}
readonly={false}
validation={'required'}
/>
The above code will render Radioinput like this.
Props
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | Yes | name of the input. |
| disabled | boolean | No | A disabled input element is unusable and un-clickable. |
| options | array | yes | a graphical control element that allows the user to choose only one of a predefined set of mutually exclusive options |
| readonly | boolean | yes | it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). |
| validation | string | no | Validation is the documented process of demonstrating that a system or process meets a defined set of requirements. |
| labelPosition | "prefix" , "postfix" | no | The label can be positioned before or after the RadioInput by setting the labelPosition property to 'before' or 'after'. |
| inline | boolean | no | radio-inline class to a series of radioboxes for controls to appear on the same line. |
| defaultValue | string , string[] | No | The default value is the value specified in the HTML value attribute. |
Events
| Name | Type | Required | Description |
|---|---|---|---|
| onChange | (value: string , string[]) => void | yes | The onchange event occurs when the value of an HTML element is changed. |
| onBlur | () => void | No | The onblur event occurs when an HTML element loses focus. The onblur event is often used on input fields. The onblur event is often used with form validation (when the user leaves a form field). |