foreign-sapphire•12mo ago

Ant d switch doesnot work in form item

import React from 'react'; import { Form, Switch } from 'antd'; interface SwitchInputProps { label: string; name: string; size?: 'default' | 'small'; // Make size prop accept only specific values } const SwitchInput = ({ label, name, size }: SwitchInputProps) => { return ( <Form.Item name={name} valuePropName="" > <div style={{ display: 'flex' }}> <h4 style={{ marginRight: "10px" }}>{label}</h4> <Switch size={size} /> </div> </Form.Item> ); }; export default SwitchInput; when used this it is returning the value as undefined

22 Replies

kapa.ai•12mo ago

Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're facing is likely due to the valuePropName prop in your Form.Item being set to an empty string. This prop is used to define which property of the form-controlled component (in this case, the Switch) should be used as the value for form data. For a Switch component, this should be "checked". Here's how you should modify your code:

import React from 'react';
import { Form, Switch } from 'antd';

interface SwitchInputProps {
    label: string;
    name: string;
    size?: 'default' | 'small'; // Make size prop accept only specific values
}

const SwitchInput = ({ label, name, size }: SwitchInputProps) => {
    return (
        <Form.Item
            name={name}
            valuePropName="checked"
        >
            <div style={{ display: 'flex' }}>
                <h4 style={{ marginRight: "10px" }}>{label}</h4>
                <Switch size={size} />
            </div>
        </Form.Item>
    );
};

export default SwitchInput;

import React from 'react';
import { Form, Switch } from 'antd';

interface SwitchInputProps {
    label: string;
    name: string;
    size?: 'default' | 'small'; // Make size prop accept only specific values
}

const SwitchInput = ({ label, name, size }: SwitchInputProps) => {
    return (
        <Form.Item
            name={name}
            valuePropName="checked"
        >
            <div style={{ display: 'flex' }}>
                <h4 style={{ marginRight: "10px" }}>{label}</h4>
                <Switch size={size} />
            </div>
        </Form.Item>
    );
};

export default SwitchInput;

This way, the value of the Switch (whether it's on or off) will be correctly captured in the form data. For more information on how to use forms in refine, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphire•12mo ago

@kapa.ai wat did u modify ?

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I modified the valuePropName prop in your Form.Item component. Initially, it was set to an empty string (""), which means it wasn't correctly mapping to any property of the Switch component. I changed it to "checked", like so:

<Form.Item
    name={{name}}
    valuePropName="checked"
>

<Form.Item
    name={{name}}
    valuePropName="checked"
>

The valuePropName prop is used to specify which property of the form-controlled component (in this case, the Switch) should be used as the value for form data. For a Switch component, this should be "checked", as this property indicates whether the switch is on (true) or off (false). By setting valuePropName to "checked", the form data will correctly reflect the state of the Switch component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphire•12mo ago

any thought on this? const onFinishHandler = async (data: any) => { console.log(data) await onFinish({ ...data, createdBy: identity.username }) }when consoled i m getting the value of all the switch wheter seleted or not undefined

rising-crimson•12mo ago

hello @jash.s Form.Item's first child should be input like this <Form.Item <Switch>

foreign-sapphire•12mo ago

<Form.Item name={[name]} valuePropName="checked" > <Switch size={size} /> </Form.Item> by this if it is false it is returing undefined and wat needs to be done if i need to style it @alicanerdurmaz

rising-crimson•12mo ago

you can give className to switch components or you can use design tokens https://ant.design/components/switch name field is string. I guess it's wrong. switch should be boolean

Switch - Ant Design

An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises

foreign-sapphire•12mo ago

wat about the undefined one ? @alicanerdurmaz

rising-crimson•12mo ago

I don't understand undefined one case. switch has 2 case. true or false

foreign-sapphire•12mo ago

for the above if i click on the save button without toggling the switch the it consoles undefined as the value @alicanerdurmaz

rising-crimson•12mo ago

hmm. can you double check please, form item name prop is correct ? <Form.Item name={[name]} valuePropName="checked" > <Switch size={size} /> </Form.Item> by this if it is false it is returing undefined

foreign-sapphire•12mo ago

yes so it is like if the user comes on the page and doesnot change or toogle the switch the value is undefined but if the user toogles it then it will return true or false on the toogled

rising-crimson•12mo ago

I don't think it's possible. antd switch only can be true or false. you can use another state and keep track of "users is changed to toggle" if it's not you can modify form values and send undefined