Overview
AudiencePicker provides a segmented control for selecting who can access content. Levels range from restrictive (Owner) to open (Public), with optional participant segmentation and inherited access display.
Key Features
- Four access levels: Owner, Builder, Participant, Public
- Public level requires explicit confirmation
- Optional participant segmentation with tag selection
- Inherited access display with override option
- Compact cell variant for table columns
Examples
Basic Usage
Simple access level selector
Audience Access
Control who can access this resource
RestrictiveOpen
With Disabled Levels
Prevent selection of specific levels
Audience Access
Control who can access this resource
RestrictiveOpen
With Segmentation
Narrow participant access to specific segments
Audience Access
Control who can access this resource
RestrictiveOpen
Beta Testers
1 segment selected
With Inherited Access
Show and override inherited access levels
Audience Access
Control who can access this resource
RestrictiveOpen
Inheriting "Builder" from Program Settings
Custom Subtitle
Override the default subtitle text for context-specific messaging.
Audience Access
Who can access this project?
RestrictiveOpen
Table Cell Variant
Compact display for use in tables
Read-only
Part.
Editable
Part.
With disabled
Build.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | AudienceLevel | required | Current selected audience level |
onChange | (level: AudienceLevel) => void | required | Callback when level changes |
defaultLevel | AudienceLevel | "participant" | Visual indicator for recommended level |
disabledLevels | AudienceLevel[] | [] | Levels that cannot be selected |
enableSegmentation | boolean | false | Enable participant segmentation panel |
inheritedAccess | InheritedAccess | - | Inherited access information |
size | "sm" | "default" | "default" | Size variant: sm or default |
subtitle | string | - | Custom subtitle text (defaults to i18n audience.access.subtitle) |
Usage
import { AudiencePicker, AudiencePickerCell } from '@/ui/components';
import type { AudienceLevel, ParticipantTag, InheritedAccess } from '@/ui/components/audience-picker';
// Basic usage
const [level, setLevel] = useState<AudienceLevel>('participant');
<AudiencePicker
value={level}
onChange={setLevel}
/>
// With disabled levels
<AudiencePicker
value={level}
onChange={setLevel}
disabledLevels={['owner', 'public']}
disabledLevelReasons={{
owner: 'Only admins can grant owner access',
public: 'Public access is disabled for this resource type',
}}
/>
// With segmentation
const [tags, setTags] = useState<string[]>([]);
const availableTags: ParticipantTag[] = [
{ id: 'beta', label: 'Beta Testers' },
{ id: 'internal', label: 'Internal Team' },
];
<AudiencePicker
value={level}
onChange={setLevel}
enableSegmentation
selectedTags={tags}
onTagsChange={setTags}
availableTags={availableTags}
/>
// With inherited access
const inheritedAccess: InheritedAccess = {
level: 'builder',
source: 'Program Settings',
};
<AudiencePicker
value={level}
onChange={setLevel}
inheritedAccess={inheritedAccess}
onOverride={() => setIsOverridden(true)}
isOverridden={isOverridden}
/>
// With custom subtitle
<AudiencePicker
value={level}
onChange={setLevel}
subtitle="Who can access this project?"
/>
// Table cell variant
<AudiencePickerCell
value="participant"
onChange={(newLevel) => handleChange(newLevel)}
/>