{"id":19889714,"url":"https://github.com/tinalabs/react-tinacms-field-condition","last_synced_at":"2025-07-14T03:05:44.563Z","repository":{"id":54543049,"uuid":"337889359","full_name":"tinalabs/react-tinacms-field-condition","owner":"tinalabs","description":"A TinaCMS field suite for making conditional field logic in forms","archived":false,"fork":false,"pushed_at":"2021-02-18T15:52:12.000Z","size":121,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-06T23:04:15.854Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinalabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-11T00:13:27.000Z","updated_at":"2022-10-07T20:52:38.000Z","dependencies_parsed_at":"2022-08-13T19:10:42.167Z","dependency_job_id":null,"html_url":"https://github.com/tinalabs/react-tinacms-field-condition","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/tinalabs/react-tinacms-field-condition","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinalabs%2Freact-tinacms-field-condition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinalabs%2Freact-tinacms-field-condition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinalabs%2Freact-tinacms-field-condition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinalabs%2Freact-tinacms-field-condition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinalabs","download_url":"https://codeload.github.com/tinalabs/react-tinacms-field-condition/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinalabs%2Freact-tinacms-field-condition/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265236735,"owners_count":23732494,"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-12T18:11:26.404Z","updated_at":"2025-07-14T03:05:44.482Z","avatar_url":"https://github.com/tinalabs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-tinacms-field-condition`\n\nA TinaCMS field suite for making conditional field logic in forms\n\n## Usage\n\nThis plugin expects you to already have a working [TinaCMS](https://tinacms.org) project.\n\n### Installing\n\nYou can install the plugin package by running:\n\n```\nnpm install react-tinacms-field-condition\n```\n\n### Register Plugin\n\nIn your code, register the plugin:\n\n```\nimport { ConditionalFieldPlugin, ConditionalGroupFieldPlugin } from 'react-tinacms-field-condition'\n\nconst cms = new TinaCMS();\n\ncms.plugins.add(ConditionalFieldPlugin);\ncms.plugins.add(ConditionalGroupFieldPlugin);\n```\n\n### Making A Single Field Conditional\n\nIn a [form config](https://tina.io/docs/plugins/forms/), you can use the `condition` field like any other field, providing it a child field to render when its condition returns true.\n\n```\nconst fields = [\n  { name: \"type\", label: \"Type\", component: \"select\", options: [\"image\", \"Video\"] }\n  { \n    name: \"image\", \n    label: \"Image\", \n    component: \"condition\",\n    condition: (value, values) =\u003e values.type === \"image\"\n    field: { component: \"image\" }\n  },\n  { \n    name: \"video\", \n    label: \"Video\", \n    component: \"condition\",\n    condition: (value, values) =\u003e values.type === \"video\"\n    field: { component: \"video\" }\n  }\n]\n```\n\n#### Pro-tips\n\n- The nested field will share the same `name` as the condition field if no `name` is specified for the nested field\n\n### Making Multiple Fields Conditional\n\nIn a [form config](https://tina.io/docs/plugins/forms/), you can use the `condition-group` field like any other field, providing it a child fields to render when its condition returns true.\n\n```\nconst fields = [\n  { name: \"type\", label: \"Type\", component: \"select\", options: [\"image\", \"Video\"] }\n  { \n    name: \"image\", \n    label: \"Image Fields\", \n    component: \"condition-group\",\n    condition: (value, values) =\u003e values.type === \"image\"\n    fields: [\n      { name: \"src\", label: \"Image\", component: \"image\" },\n      { name: \"alt\", label: \"Alternative Text\", description: \"Displayed if the image fails to load and to screen readers\", component: \"image\" }\n    ]\n  },\n  { \n    name: \"video\", \n    label: \"Video\", \n    component: \"condition-group\",\n    condition: (value, values) =\u003e values.type === \"video\"\n    fields: [\n      { name: \"src\", label: \"Video\", component: \"video\" },\n      { name: \"thumbnail\", label: \"Thumbnail Image\", component: \"image\" }\n    ]\n  }\n]\n```\n\n#### Pro-tips\n\n- Unlike the `condition` field, the child fields of a `condition-group` must have their own name. However, the `condition-group` field does _not_ require a `name`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinalabs%2Freact-tinacms-field-condition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinalabs%2Freact-tinacms-field-condition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinalabs%2Freact-tinacms-field-condition/lists"}