Checkbox
Use checkboxes for multiple choice lists or properties or true/false properties of an event. Different color presets are available.
Demo
<Checkbox label="Option 1" description="Checked checkbox" defaultChecked={true} />
<Checkbox label="Option 2" description="Empty checkbox" />
<Checkbox label="Option 3" description="Disabled checkbox" disabled={true} />
<Checkbox label="Option 4" description="Disabled and checked checkbox" disabled={true} defaultChecked={true} /><Checkbox label="Primary" color="primary" defaultChecked={true} />
<Checkbox label="Secondary" color="secondary" defaultChecked={true} />
<Checkbox label="Success" color="success" defaultChecked={true} />
<Checkbox label="Danger" color="danger" defaultChecked={true} />
<Checkbox label="Warning" color="warning" defaultChecked={true} />
<Checkbox label="Info" color="info" defaultChecked={true} />JSXTSX
import { Checkbox, Page, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Checkbox</div>
<Checkbox label="Option 1" description="Checked checkbox" defaultChecked={true} />
<Checkbox label="Option 2" description="Empty checkbox" />
<Checkbox label="Option 3" description="Disabled checkbox" disabled={true} />
<Checkbox label="Option 4" description="Disabled and checked checkbox" disabled={true} defaultChecked={true} />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Checkbox colors</div>
<Checkbox label="Primary" color="primary" defaultChecked={true} />
<Checkbox label="Secondary" color="secondary" defaultChecked={true} />
<Checkbox label="Success" color="success" defaultChecked={true} />
<Checkbox label="Danger" color="danger" defaultChecked={true} />
<Checkbox label="Warning" color="warning" defaultChecked={true} />
<Checkbox label="Info" color="info" defaultChecked={true} />
</div>
</Page>
);
}
export default App;
import { Checkbox, Page, setOptions } from '@mobiscroll/react';
import { FC } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Checkbox</div>
<Checkbox label="Option 1" description="Checked checkbox" defaultChecked={true} />
<Checkbox label="Option 2" description="Empty checkbox" />
<Checkbox label="Option 3" description="Disabled checkbox" disabled={true} />
<Checkbox label="Option 4" description="Disabled and checked checkbox" disabled={true} defaultChecked={true} />
</div>
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Checkbox colors</div>
<Checkbox label="Primary" color="primary" defaultChecked={true} />
<Checkbox label="Secondary" color="secondary" defaultChecked={true} />
<Checkbox label="Success" color="success" defaultChecked={true} />
<Checkbox label="Danger" color="danger" defaultChecked={true} />
<Checkbox label="Warning" color="warning" defaultChecked={true} />
<Checkbox label="Info" color="info" defaultChecked={true} />
</div>
</Page>
);
export default App;