Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch with Label #94

Closed
rhuanbarreto opened this issue Jul 31, 2019 · 8 comments · May be fixed by #171
Closed

Switch with Label #94

rhuanbarreto opened this issue Jul 31, 2019 · 8 comments · May be fixed by #171
Labels
help wanted Extra attention is needed

Comments

@rhuanbarreto
Copy link

First I would like to thank you a lot for this work! This saves lot's of time!

One thing that I didn't find was the label for the switch as it has for the checkbox. How can I make it?

@cliedeman
Copy link
Collaborator

cliedeman commented Aug 1, 2019

probably something like:

export interface SwitchWithLabelProps extends SwitchProps {
  Label: Omit<
    MuiFormControlLabelProps,
    'checked' | 'name' | 'onChange' | 'value' | 'inputRef'
  >;
}

export const SwitchWithLabel: React.ComponentType<SwitchWithLabelProps> = ({
  Label,
  ...props
}) => (
  <FormControlLabel
    control={<MuiSwitch {...fieldToSwitch(props)} />}
    {...Label}
  />
);

@rhuanbarreto
Copy link
Author

For now I just used:

              <InputLabel
                htmlFor="test"
              >
                <Field
                  name="test"
                  component={Switch}
                  color="primary"
                />
                Label Text
              </InputLabel>

But the library could have something integrated like the checkbox.

@cliedeman cliedeman added the help wanted Extra attention is needed label Aug 21, 2019
@cliedeman
Copy link
Collaborator

Contributions welcome :)

@Razaik25
Copy link

Razaik25 commented Oct 7, 2019

Hi,
Can I take this up if no one is working on it?
Thanks

@cliedeman
Copy link
Collaborator

Sure, go ahead.

@hotcakedev628
Copy link

hotcakedev628 commented Dec 9, 2020

Does this not work for you?

                   <Switch
                     checked={values.isChecked}
                     color="primary"
                     edge="start"
                     name="test"
                     onChange={handleChange}
                     value={values.isChecked}
                   />

@rhuanbarreto
Copy link
Author

PR is there for merging for 5 months. Can someone have a look?

@atlanteh
Copy link

For now I just used:

              <InputLabel
                htmlFor="test"
              >
                <Field
                  name="test"
                  component={Switch}
                  color="primary"
                />
                Label Text
              </InputLabel>

But the library could have something integrated like the checkbox.

Actually according to the sandbox in the docs the right solution is to use

<FormControlLabel
	control={<Field component={Switch} name="name" />}
	label="Name"
/>

Using your solution, clicking on the label doesn't actually changes the switch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants