I am using blueprint checkbox.
https://blueprintjs.com/docs/#core/components/checkbox

By default, the text with checkbox is both clickable. How can i ignore the label click event? I want the event to only click the checkbox rather than the label text.

Also, it follow the width of parent component. How can I set the dynamic width to Checkbox itself rather than expand to parent width?

import './App.css';
import { Checkbox } from "@blueprintjs/core";
import '@blueprintjs/core/lib/css/blueprint.css';

function App() {


  let isChecked = false;
  return (
    <div className="App">
      <div style={{
        display: 'block', width: 500, padding: 30
      }}>

        <Checkbox
          style={{ backgroundColor: "red" }}
          // label="Fast Food" defaultIndeterminate={true}
          label={'Checked'}
        />

      </div>
    </div>
  );
}

export default App;