What is the best way to display a checkbox with text inside using Reactjs?

Question

What is the best way to display a checkbox with text inside using Reactjs?

I am using an Ant Design checkbox in my project.

This is how my code looks:

<Checkbox checked={this.state.D} onChange={(e)=> this.setState({ D: e.target.checked})}>D</Checkbox>
<Checkbox checked={this.state.L} onChange={(e)=> this.setState({ L: e.target.checked})}>L</Checkbox>
<Checkbox checked={this.state.M} onChange={(e)=> this.setState({ M: e.target.checked})}>M</Checkbox>
<Checkbox checked={this.state.M1} onChange={(e)=> this.setState({ M1: e.target.checked})}>M</Checkbox>
<Checkbox checked={this.state.J} onChange={(e)=> this.setState({ J: e.target.checked})}>J</Checkbox>

When I run the code, I see this output:

https://i.sstatic.net/XL9LN.png

However, I would like it to display text inside the checkboxes, similar to this:

https://i.sstatic.net/auKyv.png

Could you please advise me on how to achieve this desired rendering?

javascript css reactjs checkbox antd

Answer 1

Answer №1

By placing text within the Checkbox element in antd, it is similar to using a Radio.Group.

<Radio.Group defaultValue="a" size="large">
  <Radio.Button value="a">Hangzhou</Radio.Button>
  <Radio.Button value="b">Shanghai</Radio.Button>
  <Radio.Button value="c">Beijing</Radio.Button>
  <Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>;

https://i.sstatic.net/eWSsY.png

If you wish to use "Round Buttons" like in the example, you will need to create a custom component using <Button shape="circle"/> and handle its clicked state.

https://i.sstatic.net/sRn0b.png

It's worth noting that creating such a component goes beyond the scope of this inquiry, even though it's quite straightforward.

Demo:

https://codesandbox.io/s/antdstart-4sdyp?fontsize=14

Answer 2

By placing text within the Checkbox element in antd, it is similar to using a Radio.Group.

<Radio.Group defaultValue="a" size="large">
  <Radio.Button value="a">Hangzhou</Radio.Button>
  <Radio.Button value="b">Shanghai</Radio.Button>
  <Radio.Button value="c">Beijing</Radio.Button>
  <Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>;

https://i.sstatic.net/eWSsY.png

If you wish to use "Round Buttons" like in the example, you will need to create a custom component using <Button shape="circle"/> and handle its clicked state.

https://i.sstatic.net/sRn0b.png

It's worth noting that creating such a component goes beyond the scope of this inquiry, even though it's quite straightforward.

Demo:

https://codesandbox.io/s/antdstart-4sdyp?fontsize=14

What is the best way to display a checkbox with text inside using Reactjs?

Answer №1

Similar questions

From traditional relational databases to MongoDB/Mongoose database design

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

Is it better to choose "_this" over "self" in JavaScript?

What steps can be taken to address issues with the counting system in a lootbox opening

The paragraph tag remains unchanged

Is there a way to retrieve the previous value in an input field's onChange event?

Adding a class to the body element in an HTML file using AngularJS

What is the method for detecting when the Enter key has been pressed in a field?

"Partially loaded" when document is ready

Issue: Catching errors in proxy function calls

Utilizing Material UI to create a versatile and adaptable grid layout

What is the reason for updating only one out of three charts using react-chartjs-2?

The CSS Menu is not displaying correctly on Internet Explorer 8

The Page is Not Able to Scroll

What is the process for deploying AppBar Material UI?

The default value is not displayed in the Angular dropdown menu

How can I make a Bootstrap video embed fill the entire width of the screen?

Data not being displayed in dynamic <table>

Improving the efficiency of JSON data retrieval in JavaScript

Is there a way to include an image in a serialized file?