[ { "tags": {}, "description": "Segmented controls act as a toggle between a current state and related states, often changing the view of information within a single page.", "methods": [], "displayName": "SegmentedControl", "props": { "SegmentedControlProps": { "children": { "name": "children", "defaultValue": null, "description": "Options provided in the segmented control", "required": true, "type": { "name": "``" }, "tags": { "type": "``" } }, "label": { "name": "label", "defaultValue": null, "description": "A text label to the left of the segmented control. Sets the `name` prop if none is provided.", "required": false, "type": { "name": "enum", "raw": "ReactNode", "value": [ { "value": "string" }, { "value": "number" }, { "value": "false" }, { "value": "true" }, { "value": "ReactElement>", "description": "", "fullComment": "", "tags": {} }, { "value": "Iterable", "description": "", "fullComment": "", "tags": {} }, { "value": "ReactPortal", "description": "", "fullComment": "", "tags": {} } ] }, "tags": {} }, "onChange": { "name": "onChange", "defaultValue": null, "description": "Callback that gets called when a user makes a new selection.", "required": false, "type": { "name": "(value: string) => void" }, "tags": {} }, "defaultValue": { "name": "defaultValue", "defaultValue": null, "description": "Defines the default, or initial value of the component. Ignored if `value` is also provided.", "required": false, "type": { "name": "string" }, "tags": {} }, "aria-controls": { "name": "aria-controls", "defaultValue": null, "description": "Identifies the element(s) whose contents/presence is controlled by the segmented control.\n\nRequired as a prop on the control, or on each individual option.", "required": false, "type": { "name": "string" }, "tags": {} }, "name": { "name": "name", "defaultValue": null, "description": "Identifies the segmented control group to screen readers. Auto-generated if no `name` or `label` is provided.\n\nIt's recommended for accessability to set this to a meaningful value.", "required": false, "type": { "name": "string" }, "tags": {} }, "size": { "name": "size", "defaultValue": { "value": "default" }, "description": "Defines the size of the segmented control. Can be either `xsmall`, `default`, or `large`", "required": false, "type": { "name": "enum", "raw": "Size", "value": [ { "value": "\"small\"" }, { "value": "\"xsmall\"" }, { "value": "\"default\"" }, { "value": "\"large\"" } ] }, "tags": {} }, "darkMode": { "name": "darkMode", "defaultValue": null, "description": "Toggles dark mode", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": {} }, "value": { "name": "value", "defaultValue": null, "description": "Controls the value of the component.\nIf provided, you must update the value in the `onChange` method,\nor other user actions (such as routing)", "required": false, "type": { "name": "string" }, "tags": {} }, "followFocus": { "name": "followFocus", "defaultValue": { "value": true }, "description": "Defines whether the selection should automatically follow focus.\nIf set to true, the arrow keys can be used to switch selection,\notherwise a keyboard user will need to press enter to make a selection.\n\nDefault: `true`", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": {} } }, "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes", "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes" } }, { "tags": {}, "description": "SegmentedControlOption", "methods": [], "displayName": "SegmentedControlOption", "props": { "BaseSegmentedControlOptionProps": { "children": { "name": "children", "defaultValue": null, "description": "Can be text and/or an icon element", "required": false, "type": { "name": "enum", "raw": "ReactNode", "value": [ { "value": "string" }, { "value": "number" }, { "value": "false" }, { "value": "true" }, { "value": "ReactElement>", "description": "", "fullComment": "", "tags": {} }, { "value": "Iterable", "description": "", "fullComment": "", "tags": {} }, { "value": "ReactPortal", "description": "", "fullComment": "", "tags": {} } ] }, "tags": {} }, "value": { "name": "value", "defaultValue": null, "description": "The value of the option", "required": true, "type": { "name": "string" }, "tags": {} }, "glyph": { "name": "glyph", "defaultValue": null, "description": "The icon to display to the left of the option.", "required": false, "type": { "name": "``" }, "tags": { "type": "``" } }, "disabled": { "name": "disabled", "defaultValue": null, "description": "Toggles whether the option is disabled. Defaults to `false`", "required": false, "type": { "name": "enum", "raw": "boolean", "value": [ { "value": "false" }, { "value": "true" } ] }, "tags": {} }, "aria-controls": { "name": "aria-controls", "defaultValue": null, "description": "Identifies the element(s) whose contents/presence is controlled by the segmented control.\n\nRequired as a prop on the control, or on each individual option.", "required": false, "type": { "name": "string" }, "tags": {} } }, "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes", "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes", "AsProp": { "as": { "name": "as", "defaultValue": null, "description": "The component or element to render as", "required": false, "type": { "name": "enum", "raw": "PolymorphicAs", "value": [ { "value": "\"symbol\"" }, { "value": "\"object\"" }, { "value": "\"div\"" }, { "value": "\"a\"" }, { "value": "\"abbr\"" }, { "value": "\"address\"" }, { "value": "\"area\"" }, { "value": "\"article\"" }, { "value": "\"aside\"" }, { "value": "\"audio\"" }, { "value": "\"b\"" }, { "value": "\"base\"" }, { "value": "\"bdi\"" }, { "value": "\"bdo\"" }, { "value": "\"big\"" }, { "value": "\"blockquote\"" }, { "value": "\"body\"" }, { "value": "\"br\"" }, { "value": "\"button\"" }, { "value": "\"canvas\"" }, { "value": "\"caption\"" }, { "value": "\"center\"" }, { "value": "\"cite\"" }, { "value": "\"code\"" }, { "value": "\"col\"" }, { "value": "\"colgroup\"" }, { "value": "\"data\"" }, { "value": "\"datalist\"" }, { "value": "\"dd\"" }, { "value": "\"del\"" }, { "value": "\"details\"" }, { "value": "\"dfn\"" }, { "value": "\"dialog\"" }, { "value": "\"dl\"" }, { "value": "\"dt\"" }, { "value": "\"em\"" }, { "value": "\"embed\"" }, { "value": "\"fieldset\"" }, { "value": "\"figcaption\"" }, { "value": "\"figure\"" }, { "value": "\"footer\"" }, { "value": "\"form\"" }, { "value": "\"h1\"" }, { "value": "\"h2\"" }, { "value": "\"h3\"" }, { "value": "\"h4\"" }, { "value": "\"h5\"" }, { "value": "\"h6\"" }, { "value": "\"head\"" }, { "value": "\"header\"" }, { "value": "\"hgroup\"" }, { "value": "\"hr\"" }, { "value": "\"html\"" }, { "value": "\"i\"" }, { "value": "\"iframe\"" }, { "value": "\"img\"" }, { "value": "\"input\"" }, { "value": "\"ins\"" }, { "value": "\"kbd\"" }, { "value": "\"keygen\"" }, { "value": "\"label\"" }, { "value": "\"legend\"" }, { "value": "\"li\"" }, { "value": "\"link\"" }, { "value": "\"main\"" }, { "value": "\"map\"" }, { "value": "\"mark\"" }, { "value": "\"menu\"" }, { "value": "\"menuitem\"" }, { "value": "\"meta\"" }, { "value": "\"meter\"" }, { "value": "\"nav\"" }, { "value": "\"noindex\"" }, { "value": "\"noscript\"" }, { "value": "\"ol\"" }, { "value": "\"optgroup\"" }, { "value": "\"option\"" }, { "value": "\"output\"" }, { "value": "\"p\"" }, { "value": "\"param\"" }, { "value": "\"picture\"" }, { "value": "\"pre\"" }, { "value": "\"progress\"" }, { "value": "\"q\"" }, { "value": "\"rp\"" }, { "value": "\"rt\"" }, { "value": "\"ruby\"" }, { "value": "\"s\"" }, { "value": "\"samp\"" }, { "value": "\"search\"" }, { "value": "\"slot\"" }, { "value": "\"script\"" }, { "value": "\"section\"" }, { "value": "\"select\"" }, { "value": "\"small\"" }, { "value": "\"source\"" }, { "value": "\"span\"" }, { "value": "\"strong\"" }, { "value": "\"style\"" }, { "value": "\"sub\"" }, { "value": "\"summary\"" }, { "value": "\"sup\"" }, { "value": "\"table\"" }, { "value": "\"template\"" }, { "value": "\"tbody\"" }, { "value": "\"td\"" }, { "value": "\"textarea\"" }, { "value": "\"tfoot\"" }, { "value": "\"th\"" }, { "value": "\"thead\"" }, { "value": "\"time\"" }, { "value": "\"title\"" }, { "value": "\"tr\"" }, { "value": "\"track\"" }, { "value": "\"u\"" }, { "value": "\"ul\"" }, { "value": "\"var\"" }, { "value": "\"video\"" }, { "value": "\"wbr\"" }, { "value": "\"webview\"" }, { "value": "\"svg\"" }, { "value": "\"animate\"" }, { "value": "\"animateMotion\"" }, { "value": "\"animateTransform\"" }, { "value": "\"circle\"" }, { "value": "\"clipPath\"" }, { "value": "\"defs\"" }, { "value": "\"desc\"" }, { "value": "\"ellipse\"" }, { "value": "\"feBlend\"" }, { "value": "\"feColorMatrix\"" }, { "value": "\"feComponentTransfer\"" }, { "value": "\"feComposite\"" }, { "value": "\"feConvolveMatrix\"" }, { "value": "\"feDiffuseLighting\"" }, { "value": "\"feDisplacementMap\"" }, { "value": "\"feDistantLight\"" }, { "value": "\"feDropShadow\"" }, { "value": "\"feFlood\"" }, { "value": "\"feFuncA\"" }, { "value": "\"feFuncB\"" }, { "value": "\"feFuncG\"" }, { "value": "\"feFuncR\"" }, { "value": "\"feGaussianBlur\"" }, { "value": "\"feImage\"" }, { "value": "\"feMerge\"" }, { "value": "\"feMergeNode\"" }, { "value": "\"feMorphology\"" }, { "value": "\"feOffset\"" }, { "value": "\"fePointLight\"" }, { "value": "\"feSpecularLighting\"" }, { "value": "\"feSpotLight\"" }, { "value": "\"feTile\"" }, { "value": "\"feTurbulence\"" }, { "value": "\"filter\"" }, { "value": "\"foreignObject\"" }, { "value": "\"g\"" }, { "value": "\"image\"" }, { "value": "\"line\"" }, { "value": "\"linearGradient\"" }, { "value": "\"marker\"" }, { "value": "\"mask\"" }, { "value": "\"metadata\"" }, { "value": "\"mpath\"" }, { "value": "\"path\"" }, { "value": "\"pattern\"" }, { "value": "\"polygon\"" }, { "value": "\"polyline\"" }, { "value": "\"radialGradient\"" }, { "value": "\"rect\"" }, { "value": "\"stop\"" }, { "value": "\"switch\"" }, { "value": "\"text\"" }, { "value": "\"textPath\"" }, { "value": "\"tspan\"" }, { "value": "\"use\"" }, { "value": "\"view\"" }, { "value": "ComponentClass", "description": "", "fullComment": "", "tags": {} }, { "value": "FunctionComponent", "description": "", "fullComment": "", "tags": {} } ] }, "tags": {} } } } } ]