Checkbox

https://semantic-ui.com/modules/checkbox.html#checkbox

label

SemanticShorthandItem<HtmlLabelProps>

className

string | undefined

disabled

boolean | undefined

checked

boolean | undefined

indeterminate

boolean | undefined

value

string | number | undefined

name

string | undefined

onChange

((event: FormEvent<HTMLInputElement>, data: CheckboxProps) => void) | undefined

Unselected checkbox

<Checkbox label="Checkbox" />

<Checkbox label="Checkbox" />

Disable unselected checkbox

<Checkbox label="Checkbox" disabled />

<Checkbox label="Checkbox" disabled />

Selected checkbox

<Checkbox label="Checkbox" defaultChecked />

<Checkbox label="Checkbox" defaultChecked />

Disable selected checkbox

<Checkbox label="Checkbox" checked disabled />

<Checkbox label="Checkbox" checked disabled />

Indeterminate checkbox

<Checkbox label="Checkbox" defaultIndeterminate />

<Checkbox label="Checkbox" defaultIndeterminate />

Disable indeterminate checkbox

<Checkbox label="Checkbox" indeterminate disabled />

<Checkbox label="Checkbox" indeterminate disabled />

Checkbox Group

<Form>
  <Form.Field style={{ marginBottom: '8px' }}>
    <Checkbox label="Choose this" name="checkboxGroup" value="this" />
  </Form.Field>
  <Form.Field>
    <Checkbox label="And maybe that" name="checkboxGroup" value="that" />
  </Form.Field>
</Form>

<Form>
  <Form.Field style={{ marginBottom: '8px' }}>
    <Checkbox label="Choose this" name="checkboxGroup" value="this" />
  </Form.Field>
  <Form.Field>
    <Checkbox label="And maybe that" name="checkboxGroup" value="that" />
  </Form.Field>
</Form>

Checkbox

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Unselected checkbox

Disable unselected checkbox

Selected checkbox

Disable selected checkbox

Indeterminate checkbox

Disable indeterminate checkbox

Checkbox Group

Unselected checkbox