Checkbox does not toggle

[psudarsa]

I am using a semantic.react with typescript. Here is a simple example

export class SearchBar extends Component<{}, { status: boolean }> {

constructor() {
    super();
    this.state = { status: true };
}

public render() {
    return (
        <div className="sixteen column">

            <div className="ui attached segment">
                <Checkbox label="status" checked={this.state.status} onClick={() => this.updateStatus()}/>

            </div>
        </div>
    );
}

private updateStatus() {
    this.setState({ status: !this.state.status });
}

}

the div seems to be generated always with readonly tag

I have tried this with onChange also. Am i doing something wrong here ?

[psudarsa]

Seems like this is a less issue with the packaged themes. I will move this out to the other branch.

[JoBurgard]

I seem to have the same problem. As soon as I add a function to onClick or onChange the checkbox doesn't toggle anymore.

[levithomason]

Here's a working example:

http://react.semantic-ui.com/modules/checkbox#remote-control

[colinweight]

To elaborate on what @psudarsa said, for me this was a css issue as I was using a custom theme and the css resulting from the Gulp build.

Despite the actual input having the class of hidden, being readonly and not showing as checked, the javascript is actually working as it should. The problem is missing css. When using a custom theme, the builder is not including custom checkbox overrides.

To fix this I copied the overrides from themes/default/modules/checkbox.overrides to site/modules/checkbox.overrides and the check mark appeared. You may need to copy/paste the code from/to a different location depending on your theming needs.