A set of interactive controls where only one can be selected at a time.
4 variants found
<Skeleton loading={isLoading}>
<Flex align="center" gap="5">
<SegmentedControl.Root
disabled={isAccessTypeChanging}
size="1"
style={isAccessTypeChanging ? { opacity: 0.7 } : undefined}
value={optimisticAccessType}
onValueChange={handleAccessChange}
>
<SegmentedControl.Item value={AccessType.NONE}>
None
</SegmentedControl.Item>
<SegmentedControl.Item value={AccessType.SOME}>
Some
</SegmentedControl.Item>
<SegmentedControl.Item value={AccessType.ALL}>
All
</SegmentedControl.Item>
</SegmentedControl.Root>
<Separator orientation="vertical" size="4" />
<Flex align="center" gap="2">
<Switch
checked={flagEnvironment?.flagEnabled}
color="purple"
disabled={flagEnvironment?.accessType === AccessType.NONE}
onCheckedChange={(flagEnabled) => {
if (flagEnabled) {
setIsEnableFlagDialogOpen(true);
} else {
setIsDisableFlagDialogOpen(true);
}
}}
/>
<Text size="2" weight="bold">
{flagEnvironment?.flagEnabled ? 'On' : 'Off'}
</Text>
</Flex>
</Flex>
</Skeleton><Box width="100%">
<Card size="4" variant="classic">
<Flex direction="column">
<SegmentedControl.Root
mb="5"
size="2"
value={tab}
onValueChange={(value: string) => {
const urlSearchParams = new URLSearchParams(
searchParams,
);
urlSearchParams.set('tab', value);
router.push(
`${pathname}?${urlSearchParams.toString()}`,
);
}}
>
<SegmentedControl.Item value="profile">
Return an SSO profile
</SegmentedControl.Item>
<SegmentedControl.Item value="error">
Return an error
</SegmentedControl.Item>
</SegmentedControl.Root>
</Flex>
<Grid>
<Box gridColumn="1" gridRow="1" {...profileTabProps}>
<SsoForm
connectionId={connectionId}
loginHint={loginHint}
relayState={relayState}
onFormSubmit={onFormSubmit}
/>
</Box>
<Box gridColumn="1" gridRow="1" {...errorTabProps}>
<ErrorForm
connectionId={connectionId}
relayState={relayState}
onFormSubmit={onFormSubmit}
/>
</Box>
</Grid>
</Card>
</Box>Used 36 times across 1 package
size
8 files
/branding/edit