{"id":20237411,"url":"https://github.com/react-widget/radio","last_synced_at":"2026-05-23T16:36:58.397Z","repository":{"id":33607678,"uuid":"159170533","full_name":"react-widget/radio","owner":"react-widget","description":"https://react-widget.github.io/radio/","archived":false,"fork":false,"pushed_at":"2023-01-03T15:28:49.000Z","size":5288,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T04:16:24.282Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-widget.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-26T13:02:17.000Z","updated_at":"2020-09-17T22:52:11.000Z","dependencies_parsed_at":"2023-01-15T01:37:55.618Z","dependency_job_id":null,"html_url":"https://github.com/react-widget/radio","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fradio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fradio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fradio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widget%2Fradio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-widget","download_url":"https://codeload.github.com/react-widget/radio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241681838,"owners_count":20002388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T08:26:53.572Z","updated_at":"2026-05-23T16:36:53.379Z","avatar_url":"https://github.com/react-widget.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Radio\n\nRadio组件\n\n## 安装\n\n```\nnpm install --save react-widget-radio\n```\n\n\n## 使用\n\n[![Edit react-widget-radio](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/keen-morning-kgrgi?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```js\nimport {Radio} from 'react-widget-radio';\nimport 'react-widget-radio/style';\n\n\u003cRadio\u003eRadio\u003c/Radio\u003e\n\n```\n\n\n\n### Interfaces\n\n```ts\nexport interface RWRadioProps extends React.HTMLAttributes\u003cHTMLInputElement\u003e {\n    prefixCls?: string;\n    className?: string;\n    name?: string;\n    defaultChecked?: boolean;\n    checked?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    inputRef?: React.RefObject\u003cHTMLInputElement\u003e;\n}\nexport interface RWRadioState {\n    checked: boolean;\n}\nexport declare class RWRadio extends React.Component\u003cRWRadioProps, RWRadioState\u003e {\n    static defaultProps: RWRadioProps;\n    static getDerivedStateFromProps(props: RWRadioProps, state: RWRadioState): {\n        checked: boolean;\n    };\n    state: {\n        checked: boolean;\n    };\n    handleChange: (e: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e void;\n    render(): JSX.Element;\n}\n\nexport interface RadioProps extends Omit\u003cRWRadioProps, \"onChange\" | \"onMouseEnter\" | \"onMouseLeave\" | \"type\"\u003e {\n    name?: string;\n    value?: any;\n    onChange?: (checked: boolean, e: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e void;\n    onMouseEnter?: (event: React.MouseEvent\u003cHTMLLabelElement, MouseEvent\u003e) =\u003e void;\n    onMouseLeave?: (event: React.MouseEvent\u003cHTMLLabelElement, MouseEvent\u003e) =\u003e void;\n}\nexport declare const Radio: React.FC\u003cRadioProps\u003e \u0026 {\n    Group: typeof RadioGroup;\n};\n\nexport interface RenderProps\u003cT = any\u003e {\n    value: T | undefined;\n    onChange: (value: T) =\u003e void;\n}\nexport interface RadioOption\u003cT = any\u003e {\n    value: T;\n    label: React.ReactNode;\n    style?: React.CSSProperties;\n    className?: string;\n    disabled?: boolean;\n    readOnly?: boolean;\n    onChange?: (checked: boolean, e: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e void;\n}\nexport interface RadioGroupProps\u003cT = any\u003e extends Omit\u003cReact.HTMLAttributes\u003cHTMLDivElement\u003e, \"defaultValue\" | \"onChange\" | \"defaultChecked\"\u003e {\n    prefixCls?: string;\n    name?: string;\n    defaultValue?: T;\n    value?: T;\n    disabled?: boolean;\n    readOnly?: boolean;\n    options?: T extends string | number ? (string | number)[] : RadioOption\u003cT\u003e[];\n    render?: (props: RenderProps\u003cT\u003e) =\u003e React.ReactNode;\n    onChange?: (checkedValue: T) =\u003e void;\n}\nexport interface RadioGroupState\u003cT = any\u003e {\n    value: T | undefined;\n}\nexport declare class RadioGroup\u003cT = any\u003e extends React.Component\u003cRadioGroupProps\u003cT\u003e, RadioGroupState\u003cT\u003e\u003e {\n    static defaultProps: {\n        prefixCls: string;\n    };\n    static getDerivedStateFromProps(nextProps: RadioGroupProps, state: RadioGroupState): {\n        value: any;\n    };\n    state: {\n        value: T | undefined;\n    };\n    getGroupContext(): {\n        toggleChange: (option: RadioOption\u003cT\u003e) =\u003e void;\n        value: T | undefined;\n        name: string | undefined;\n        disabled: boolean;\n        readOnly: boolean;\n    };\n    getOptions(): RadioOption\u003cany\u003e[];\n    toggleChange: (option: RadioOption\u003cT\u003e) =\u003e void;\n    handleChange: (value: T) =\u003e void;\n    render(): JSX.Element;\n}\n\nexport interface RadioGroupContextValue {\n    toggleChange: (option: {\n        value: any;\n        label: React.ReactNode;\n    }) =\u003e void;\n    value: any;\n    name: string | undefined;\n    disabled: boolean;\n    readOnly: boolean;\n}\n\n```\n\n\n### 基础样式\n\n```css\n/* RWRadio 基础样式 */\n.rw-radio {\n\tposition: relative;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\toutline: none;\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n\tflex: none;\n}\n\n.rw-radio-input {\n\twidth: 100%;\n\theight: 100%;\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tz-index: 1;\n\tcursor: pointer;\n\topacity: 0;\n\tpadding: 0;\n\tmargin: 0;\n\tbox-sizing: border-box;\n}\n\n.rw-radio-inner {\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 16px;\n\theight: 16px;\n\tborder: 1px solid #d9d9d9;\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n}\n\n.rw-radio-input:focus + .rw-radio-inner,\n.rw-radio:hover .rw-radio-inner {\n\tborder-color: #1890ff;\n}\n\n.rw-radio-disabled .rw-radio-input,\n.rw-radio-disabled {\n\tcursor: not-allowed;\n}\n\n.rw-radio-disabled:hover .rw-radio-inner,\n.rw-radio-disabled:active .rw-radio-inner,\n.rw-radio-disabled .rw-radio-inner {\n\tbackground-color: #f5f5f5 !important;\n\tborder-color: #d9d9d9 !important;\n}\n\n/* RWRadio 选中样式 */\n.rw-radio-checked .rw-radio-inner {\n\t/* background: #1890ff; */\n\tborder-color: #1890ff;\n}\n\n.rw-radio-inner:after {\n\tbox-sizing: border-box;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tdisplay: table;\n\tbackground: #1890ff;\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\ttransform: scale(0) translate(-4px, -4px);\n\topacity: 0;\n\tcontent: \" \";\n}\n\n.rw-radio-checked .rw-radio-inner:after {\n\topacity: 1;\n\ttransform: scale(1) translate(-4px, -4px);\n}\n\n.rw-radio-disabled .rw-radio-inner:after {\n\tbackground-color: #d9d9d9;\n}\n\n/* Radio */\n.rw-radio-wrapper {\n\tdisplay: inline-flex;\n\tcursor: pointer;\n\tvertical-align: middle;\n\toutline: none;\n\talign-items: center;\n\tflex: 1;\n}\n\n.rw-radio-wrapper:hover .rw-radio-inner {\n\tborder-color: #1890ff;\n}\n\n.rw-radio-label {\n\tflex: 1;\n\tpadding: 0 8px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.rw-radio-wrapper-disabled .rw-radio-label {\n\tcolor: rgba(0, 0, 0, 0.25);\n\tcursor: not-allowed;\n}\n\n/* RadioGroup */\n.rw-radio-group {\n\tdisplay: inline-flex;\n}\n\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Fradio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-widget%2Fradio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widget%2Fradio/lists"}