Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

281
Views
Nested Form.item ant design in Radio and input

How to get values input in Form.item using Radio button AntDesign

Here is document code


import { Radio, Input, Space } from 'antd';

class App extends React.Component {
  state = {
    value: 1,
  };

  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    const { value } = this.state;
    return (
      <Radio.Group onChange={this.onChange} value={value}>
        <Space direction="vertical">
          <Radio value={4}>
            More...
            {value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
          </Radio>
        </Space>
      </Radio.Group>
    );
  }
}

ReactDOM.render(<App />, mountNode);

but I want to use Radio with input in Form.item Here is what

  <Form.Item name={name} rules={[{ required: true }]} label={label} className={className}>
      <Radio.Group value={value} onChange={onChange}>
        <Space direction="vertical">
          {(radioValue as any).map((item: any) => (
            <Radio key={item.value} value={item.value}>
              {item.title}
              <Form.Item name={'other'} label={' '}>
                <Input style={{ width: 100, marginLeft: 10 }} />
              </Form.Item>
            </Radio>
          ))}
        </Space>
      </Radio.Group>
    </Form.Item>

the problem is as you see it Form.item inside Form.item and the it's enter a new line element wish I want input and radio button at same line. I do this way because I want to get value in onFinish I'm not sure is their any better way to get input value in <Radio value={4}> without using 2 nested Form.item ?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!