How to align radio buttons horizontally in Grid in semantic-ui in react.js?

Viewed 170

I have 2 radio buttons I want to align them horizontally using Grid from semantic-ui-react package.How can I do so? Here's my code for the component.

import { Grid, Form } from "semantic-ui-react";

render() {
    return (
      <StyledForm id="form_container">
        <Grid>
          <Grid.Row>
            <Grid.Column width={3}>
              <input
                label="Client Name"
                value={this.props.clientName}
                onChange={this.setClientName}
              />
            </Grid.Column>
            <Grid.Column width={3}>
              <label htmlFor="status">{"Status"}</label>
              <Grid>
                 {" "}
                <input  // set this radio button and the below one horizontally
                  type="radio"
                  id="html"
                  name="status"
                  value="HTML"
                  onClick={() => this.setClientStatus("Active")}
                />
                  <label for="html">Active</label>
                 {" "}
                <input   //make it horizontally align with above one
                  type="radio"
                  id="css"
                  name="status"
                  value="CSS"
                  onClick={() => this.setClientStatus("InActive")}
                />
                  <label for="css">InActive</label>
              </Grid>
            </Grid.Column>
          </Grid.Row>
          <Grid.Row>
            {/* <InterfaceSelect
              isRequired
              name='apis_interface_id'
              label={translateText('Access Grants')}
              /> */}
          </Grid.Row>
          <Grid.Row>
            <ClientList />
          </Grid.Row>
        </Grid>
      </StyledForm>
    );
  }
}

Thanks for help

0 Answers
Related