CheckBox

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
        text={"checkbox"}
        onChange={(value) => Array.isArray(value) ? setcheckBox([]) : null}
        onBlur={() => setcheckBox([])}
        options={[
            { text: "Hindi", value: '1' },
            { text: "English", value: '2' },
        ]}
        labelPosition={"prefix"}
        defaultValue={['1', '2']}
        inline={false}
        onChange={(value: string) => void}
        onBlur={() => setcheckBox([])}
        validation={'required'}
    />

The above code will render Checkbox 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	Checkboxes options allow the user to select one or more items from a set.
labelPosition	"prefix" , "postfix"	no	The label can be positioned before or after the checkbox by setting the labelPosition property to 'before' or 'after'.
inline	boolean	no	checkbox-inline class to a series of checkboxes 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).