React-native-paper: Feature request : label

[sm2017]

Label component for CheckBox and RadioButton (like on the web) is awesome feature

  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">

[ferrannp]

I guess you want to have something like a Checkbox where the whole row is clickable like Material docs are showing? We have some in example. You could do something like:

<TouchableRipple
  onPress={this._onPressItem}
  style={[styles.container, style]}
>
  <View style={styles.row}>
    <View pointerEvents="none" style={styles.checkboxContainer}>
      <Checkbox checked={this.props.checked} />
    </View>
    <Text style={styles.label}>Some label here</Text>
  </View>
</TouchableRipple>

const styles = StyleSheet.create({
  container: {
    height: 48,
  },
  row: {
    minHeight: 48,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
  },
  checkboxContainer: {
    paddingRight: 8,
  },
  label: {
    flex: 1,
    flexWrap: 'wrap',
  },
});

We could do that maybe as Checkbox.Row and RadioButton.Row.

[sm2017]

@ferrannp when you press label the Checkbox must checked , like web
I want to extend touchable area in a Checkbox.Group

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[renato]

The issue is closed but I believe this feature request is still valid.